Skip to content

Instantly share code, notes, and snippets.

@philippbosch

philippbosch/sample-with-transition.html

Created June 16, 2010 10:53
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 philippbosch/440506 to your computer and use it in GitHub Desktop.
Save philippbosch/440506 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sample-with-transition.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Helvetica;
}
#elem {
width: 200px;
height: 100px;
padding: 20px;
background-color: green;
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
}
#elem.bla {
background-color: yellow;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#elem').click(function() {
$(this).toggleClass('bla');
});
});
</script>
</head>
<body>
<div id="elem">Lorem ipsum dolor sit amet.</div>
</body>
</html>
Raw
sample-without-transition.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: Helvetica;
}
#elem {
width: 200px;
height: 100px;
padding: 20px;
background-color: green;
}
#elem.bla {
background-color: yellow;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#elem').click(function() {
$(this).toggleClass('bla');
});
});
</script>
</head>
<body>
<div id="elem">Lorem ipsum dolor sit amet.</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment