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>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="blinksth animated"></div>  
<a href="javascript:void(0)" class="js-paused">paused</a>
<a href="javascript:void(0)" class="js-running">running</a>
<a href="javascript:void(0)" class="js-change-class">changeClass - hotfix - 1</a>
<a href="javascript:void(0)" class="js-change-class-alt">changeClass - hotfix - 2</a>
</body>
</html>
 
var $animated = $(".animated");
$(".js-paused").on("click",function(){
  $animated.css({
    "animationPlayState":"paused"
  });
});
$(".js-running").on("click",function(){
  $animated.css({
    "animationPlayState":"running"
  });
});
$(".js-change-class").on("click",function(){
  $animated.removeClass("animated");
  // to break the event lifecircle
  setTimeout(function(){
      $animated.addClass("animated").toggleClass("ani-long");
  }) ;
});
​
$(".js-change-class-alt").on("click",function(){
  $animated.toggleClass("ani-long");
  // or reset html
  $animated.prop({
    "outerHTML" : $animated.prop("outerHTML")
  });
  $animated = $(".animated");
  // reselect the animated element
});
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers