Why isn't this jquery animation rotating like it's supposed to?

Question

This .js works perfectly in the fiddle

function animationLoop() {
    $("#ToBeAnimated").css({
        top: ($("#paperTrail").offset().top - parseInt($("#ToBeAnimated").height()) / 2),
        left: ($("#paperTrail").offset().left - parseInt($("#ToBeAnimated").width()) / 2)
    }).rotate(270);
    $("#ToBeAnimated").animate({
        top: $("#paperTrail").offset().top + $("#paperTrail").height() - $("#ToBeAnimated").height() / 2
      }, 1000, function() {
        $(this).animate({
            rotate: "180deg"
        }, function() {
            $("#ToBeAnimated").animate({
                left: $("#paperTrail").offset().left + $("#paperTrail").width() - $("#ToBeAnimated").width() / 2
            }, 1000, function() {
                $(this).animate({
                    rotate: "90deg"
                }, function() {
                    $("#ToBeAnimated").animate({
                        top: $("#paperTrail").offset().top - $("#ToBeAnimated").height() / 2
                    }, 1000, function() {
                        $(this).animate({
                            rotate: "0deg"
                        }, function() {
                            $("#ToBeAnimated").animate({
                                left: $("#ToBeAnimated").width() / 2
                            }, 1000, function() {
                                setTimeout(animationLoop, 1000);
                            });
                        });
                    });
                });

            });
        });
    });
}
animationLoop();​

But on the actual site the scissor rotation isn't working or is somehow broken... I have inspected it... guessed and checked... researched possible conflicts...But Im stuck! Maybe I am missing something obvious?

Thanks a million for helping!... To see the animation on the live site just click the "Clip It!!!" button at the bottom of the 1st coupon!

extreme coupon network

UPDATE: It's something to do with having multiple instances of the animation on the page... When I look at a page with one result it works for me... HOWEVER... I am still unable to make it work with many items on the page (which is what I am really after).... Ideally... Whichever coupon you click on will have the animation appear on it... Currently the animation only works on the 1st coupon... and very shakey

Thanks again!

Answer 1

The fiddle you are testing with is using jQuery version 1.8.2. On your webpage, however, you are using version 1.7.2. If you change your jQuery version in the fiddle to 1.7.2, you get exactly the same buggy behavior (jerky animation in FF, no rotation in IE or Chrome) as on your page.

Solution: Update the version of jQuery you're using in your project!