How can I stop a jQuery loop animation?

I have an image which is ro开发者_StackOverflowtated 90 degress right and left continuously and I'm trying to stop it but I can't figure out how.

I tried to put the function in an If statement so I can call function = false; or true but it doesn't work.

Here is a fiddle: http://jsfiddle.net/gpPcU/

You can change the callback function to false

$("img").rotate({angle:0, callback:function(){ false; }});

You can use the JQuery stop method( http://api.jquery.com/stop/ )

Ex:

$('.img').stop(true, true)

This will do it: http://jsfiddle.net/gpPcU/3/

I'm not sure what you tried with the If statement you mentioned because that's not in your fiddle, but you were probably on the right track. Here are the main changes I made:

rotate() callback within test():

    function(){
        if(!$('img').hasClass('stop')){
            rotation()
         }else{
             $('img').rotate({angle:0});
         }
    }

Button click event:

$(".btn").click(function(){
    $("img").addClass('stop');
});