Skip to content

Instantly share code, notes, and snippets.

@jnewman12

jnewman12/example.html

Created June 26, 2013 00:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jnewman12/5863639 to your computer and use it in GitHub Desktop.
Save jnewman12/5863639 to your computer and use it in GitHub Desktop.
Download ZIP
Makes the pretty boxes move when you click on them.
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
.root {
background: grey;
padding: 40px;
}
.inner {
background: blue;
padding: 40px;
}
.box {
background: red;
padding: 40px;
margin: 10px 0;
}
</style>
<script>
$(document).ready(function() {
/*
$('body').click(function() {
console.log('body click');
});
$('.inner:first-child').click(doInnerClick);
function doInnerClick(event) {
console.log('inner click');
}*/
$('.box').bind('click', function(event) {
$(this).animate({
'borderRadius' : '50%'
});
});
});
</script>
</head>
<body>
<div class="root">
<div class="inner">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="inner">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment