开发者

jQuery: hover (mouseleave event fired when mouse is over child)

I want to create a zoom effect on some thumbs.

Here is my javascript simplified code :

parent.hover(
 function(){
   parent.stop().animate({/* css */}, inputZoomDuration, "linear");
   wrapper.stop().animate({/* cs开发者_JS百科s */}, inputZoomDuration, "linear");
   child.stop().animate({/* css */}, inputZoomDuration, "linear");
 },
 function(){
  alert("leave");
  child.stop().animate({/* css */}, 140, "linear");
  wrapper.stop().animate({/* css */}, 140, "linear");
  parent.stop().animate({/* css */}, 140, "linear");
 }
);

and the html is like :

<div parent>
 <div wrapper>
  <div child>

  </div>
 </div>
</div>

I increase the size of all my divs when I over the "parent". But a soon as I over (or leave, btw) one of the child, the alert appears. Without the alert, the result is a very bugy animation. Is there any way to prevent the mouseleave event to be fired when a child is overed?

Best regards,

thanks.

Edit : Here is the greasemonkey script : http://userscripts.org/scripts/show/94786 and a link to test it : http://browse.deviantart.com/ We can see in the console that the mouseleave event is trigerred when I leave the orange div, unlike this example : http://www.jsfiddle.net/wnuS6/3/ where the event is not fired when I leave the red div.


Change the event from .hover() to .mouseenter(). This will ensure that it will remain active until you leave the parent div area, which you can detect using the mouseleave() event. http://api.jquery.com/mouseenter/ - http://api.jquery.com/mouseleave/


After some investigations, it seems that the problem comes from greasemonkey. Here is what the wiki said :

Some versions of jQuery will not run inside the Greasemonkey sandbox. As of this writing, 1.3.2 does work, but 1.4.1 does not. It is possible to patch 1.4 versions of jQuery to work, see jQuery Forum: Importing jQuery 1.4.1 into greasemonkey scripts generates an error

However, all versions 1.4.x patched of jQuery still don't work in my specific hover case AND only with greasemonkey (indeed, I test the same script in jsFiddle, and that works with jQuery 1.4.4).

To solve the problem, I simply use jQuery 1.3.2 (and of course, I have to adapt my code a bit).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜