Question

I have an image that rotates 360 on a click event. After the image is done rotating, I would like that image to disappear. Any suggestions?

$("#refresh").rotate({
   bind:
     {
        click: function(){
            $(this).rotate({ angle:0,animateTo:720,easing: $.easing.easeInOutExpo });
            $(this).fadeOut("slow");
        }
     }

});

HTML

<div class="span4" style="float:right">

    <img src="assets/img/refresh_btn.png" id="refresh" width="70" height="70"/> 

</div>

Any help would be great. Thanks!

Answer 1

I’m assuming you’re using this? http://code.google.com/p/jqueryrotate/wiki/Documentation

In that case use the callback that’s fired upon completion. Something like this:

$("#refresh").rotate({
   bind:
     {
        click: function(){
            $(this).rotate({ angle:0,animateTo:720,easing: $.easing.easeInOutExpo });
            $(this).fadeOut("slow");
        },
        callback: function(){
            $(this).hide();
        },
     }

});