Question

I am trying to rock a simple image back and forth on a mouseover using jquery.
The image id is “img”.

   $(document).ready(function () {
        $("#img").bind('mouseenter', function () {
            $('#img').rotate(43);  
        });
        $("img").bind('mouseleave', function () {
            $('#img').rotate(-43);              
        });
    });

When I do this the first rotate works but the second does not. Why is this? I can use the second by itself and it works as expected too. I just can’t get both to work together. Iam using a library to rotate. If I sub alerts for the rotate I still can’t the second to work.
Any suggestions?
TIA
John

Answer 1

I’m guessing you’re using this plugin, and looking at the way it does the rotation, it converts the img into a canvas element which unbinds the hover events, you’ll need some way of either rebind the events, or starting with a canvas element.

Solution

Using a different plugin makes it a piece of cake. You can download it here.

$(document).ready(function(){
    $("#img").live('mouseenter', function() {
        $('#img').rotate(43);
    });
    $("img").live('mouseleave', function() {
        $('#img').rotate(-43);
    });
});

jsFiddle Demo