鼠标指针和鼠标左键闪烁

Mouseenter and mouseleave flashing

本文关键字：闪烁 鼠标 鼠标指针      更新时间：2023-09-26

当我进入鼠标时，框会变为可见，但即使我的鼠标停留在框上，它也会不断变亮或变暗，我做错了什么？

jQuery

    geoThumb = $(".geoThumb");
    geoThumb.each(function(){
        $(this).mouseenter(function() {
            $(".infoBox").fadeIn(500);
        }).mouseleave(function(){
            $(".infoBox").fadeOut(500);     
        });
    });

在.fadeIn和.fadeOut之前添加.stop。

$(".geoThumb").mouseenter(function() {
    $(".infoBox").stop().fadeIn(500);
}).mouseleave(function(){
    $(".infoBox").stop().fadeOut(500);     
});

演示：http://jsfiddle.net/DerekL/R4F9T/

它会闪烁，因为在它之前的动画未完成时，动画会排队。为了防止这种行为，设计了.stop，您可以使用它来清除所有排队的动画。

jQuery Docs 报价

当我们需要在mouseenter和mouseleave上为元素设置动画时，.stop（）方法的有用性是显而易见的。

.mousenter和.mouseleve并不是处理查询中悬停事件的最强大方法。试着使用.haverage（），它有两个函数，第一个在鼠标进入元素时运行，另一个在鼠标离开时运行。http://api.jquery.com/hover/

您根本不需要each()
使用.hover()（在这种特定情况下）
使用.stop()清除每个新事件上以前的动画构建
使用.fadeToggle()（与.haverage（）组合使用）

geoThumb = $(".geoThumb");
geoThumb.hover(function() {
     $(".infoBox").stop().fadeToggle();
});

此外，我不确定您的$(".infoBox")选择器是否足够具体，因为它是所有.infobox元素的集合，如果您只需要动画化一个特定元素，则需要查看其他一些DOM遍历方法，如.find()

相关文章：