Skip to content

Instantly share code, notes, and snippets.

@malachi358
Created May 20, 2013 01:52
Show Gist options
  • Save malachi358/5609966 to your computer and use it in GitHub Desktop.
Save malachi358/5609966 to your computer and use it in GitHub Desktop.
Animate a png onclick with a loop that fades in and out and stop it with onclick of another button.
<!--Html-->
<img src="l1.png" class="lights">
<a href="#" class="play">click me</a>
<a href="#" class="pause">Stop Lights</a>
<!--Jquery-->
<script type="text/javascript">
$(document).ready(function(){
var playstatus;
(function($){
playing = function() {
return setInterval(function() {
$( '.lights' ).fadeIn( 500 ).fadeOut( 300 );
}, 1000 );
};
})(jQuery);
$(".play").click(function(){
playstatus = playing();
});
$(".pause").click(function(){
clearInterval(playstatus);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment