CODEWITHSUNDEEP
jquery
John S
John S

Reputation: 8331

jquery creating events when mouseenter and mouseleave

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

Upvotes: 1

Views: 201

Answers (3)

Sam Martin
Sam Martin

Reputation: 1248

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

Upvotes: 2

rlemon
rlemon

Reputation: 17666

as stated above this can be done using .hover()

$(document).ready(function () {
  $("#img").hover(
    function () {
      $(this).rotate(43); 
    },
    function () {
      $(this).rotate(-43); 
    }
  );
});

Upvotes: 3

Jack
Jack

Reputation: 8941

Well right off the bat.

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

should be

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

Upvotes: 0

Related Questions