Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="item">
    <div class="inner"></div>
  </div>
  <a href="">Click here!</a>
</body>
</html>
 
.inner {
  height: 100px;
  width: 100px;
  
  background: lime;
  
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: ease-in;
}
​
.expanded .inner {
  background: blue;
  transition-duration: 0s;
}
 
$(function(){
​
$('a').click(function(evt){
 evt.preventDefault(); $('.item').toggleClass('expanded');
  setTimeout(function(){
    $('.item').toggleClass('expanded');},0)
});
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jorygrahampro
0viewers