Mouseover and mouseleave trigger every time I move the mouse inside the given element

I am creating a site where you hover the mouse over an image and it shows an element (in this case by expanding its height from 0 to 154px). jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); }); jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); }); }); The content expands when the mouse enters and collapses when the mouse leaves, but every time the mouse is moved *within* the element the content expands and collapses repeatedly until the mouse leaves the element. I've never had this issue before, and I have used these functions in the past, so i'm at a loss as to what is going on. Any ideas? Edit: jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){ jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200); }); jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){ jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200); }); }); I am now using the code above and still getting the exact same issue. I have tried all variations of the .stop function (false,false)(false,true)(true,false)(true,true). The issue occurs differently with each one, but it still occurs. ULTIMATE EDIT: The problem was that the content that the mouse went over was covered up by different content once the function was called. Therefore, at any given point the mouse was simultaneously entering and leaving the image. Solved the issue by moving the function call to a different element.
This happens because the mouseout and mouseover events bubble up to parent, so when you hover over a child element of .dropimage, its mouseout and mouseover events bubble up to .dropimage. Using mouseleave and mouseenter instead will fix the problem. Once that problem is fixed, you will find that you need to call .stop(true,true) before .animate() to stop previous animations in the event that you hover over and out multiple times quickly.

以上就是Mouseover and mouseleave trigger every time I move the mouse inside the given element的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏