如果鼠标快速移动，jQuery 照片库错误答案

【问题标题】：jQuery Photo Gallery Bug if mouse moves fast如果鼠标快速移动，jQuery 照片库错误
【发布时间】：2013-08-05 12:56:02
【问题描述】：

这是一个非常奇怪的错误，我的代码很可能是正确的，因为它在大多数情况下都有效，除非鼠标在元素上快速移动。

这是我的 CSS：

<style type="text/css">
        .fadeto {
            opacity:0.4;
            position:box;
        }
        .selected {
            opacity:1.0;
            border-style:solid;
            border-color:gold;
        }
    </style>

这是我的 html 正文：

单击图像以切换其永久可见性。或单击此处将它们全部切换：切换

<div style="margin:50px;">
<img class="fadeto" src="nature.jpg" /><!--you can change the source-->
<img class="fadeto selected" src="nature.jpg" /><!--by default selected, just not to waste time selecting elements-->
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
<img class="fadeto" src="nature.jpg" />
</div>
<div id="feedback"></div>

这是我的 jQuery 脚本：

<script>
        $(document).ready(function(){
            $('.fadeto').hover(function(){
                    $(this).fadeTo(100, 1);
                },function() {
                    if(!$(this).hasClass('selected'))
                        $(this).fadeTo(100,0.4, function(){
                            $(this).removeAttr('style'); //removed IF not selected
                            document.getElementById('feedback').innerHTML +=$(this).attr('style');
                        });
                    else {
                        $(this).removeAttr('style'); //removed IF selected
                        document.getElementById('feedback').innerHTML +=$(this).attr('style');
                        }
                })
            .click(function(){
                $(this).toggleClass('selected');
                });

            $('#Toggle_Button').click(function(){
                $('.fadeto').toggleClass('selected');
                });
});
</script>

每当我以正常速度在图像周围移动鼠标时，不着急，一切正常。但是，每当我尝试将鼠标快速移到元素上时，都会导致切换按钮出现错误：某些元素的不透明度为 1.0。

我在每个动画完成后删除 style 属性，因为我不希望任何元素保留 style="opacity:1;"，因为它会覆盖应用于元素的任何冲突的 CSS 类规则。

我已经反馈<div>，这样我就可以跟踪样式属性是否被删除，是的，无论鼠标移动多快，里面的代码都会执行，并且样式是未定义的。

另外，我知道样式表是从上到下读取的，所以我在 'fadeto' 之后包含了 'selected' 类，因为它的不透明度规则比其他规则具有更高的优先级。

如果我的代码有问题，请帮助我？否则，我能做什么？你有什么建议？

【问题讨论】：

当您快速移动鼠标时，您的反馈是说样式属性仍然存在，还是您仍然得到“未定义”？
您是否尝试过使用调试器查看问题？ Chrome 调试器将向您显示 html 元素以及与之关联的所有样式。
我第一次听说：D。抱歉，我是新手。我应该下载任何东西还是它已经在 chrome 中了？如果是的话如何访问它？
查看->开发者->Javascript控制台。打开调试器后，转到“元素”选项卡，您可以看到页面中的所有 html 元素，并且可以看到样式值随着 jQuery 运行而变化。在右侧，您可以看到应用于每个单独元素的 css。有关更多详细信息，请参阅位于 developers.google.com/chrome-developer-tools/docs/… 的 Chrome 调试器文档
非常感谢您向我展示此功能。我试过了，它很棒。因此，我再次尝试快速移动鼠标，发现所选元素中的样式仍然存在。虽然如果我正常悬停它消失了。我不明白，我能做些什么来解决这个问题？谢谢。

标签： javascript jquery css performance

【解决方案1】：

我强烈建议您在鼠标悬停和鼠标移出时使用 hoverIntent

$(selector).hoverIntent({
    over: function(){},
    out: function(){},
    selector: '.selector'
});

http://cherne.net/brian/resources/jquery.hoverIntent.html

希望对你有帮助

【讨论】：

这似乎是个好主意。但是如果没有插件，如何仅使用 jquery 库实现相同的效果？也许有 javascript setTimer 或 jQuery 延迟？谢谢
是的，逻辑是在执行之前延迟某个时间，通过插件并尝试找到出路，但我认为最好使用插件，因为您可能需要多次使用它跨度>
这是评论，不是答案。
是的，给出一个代码 sn-p 可能会给出一个快速的想法是评论！！！！真奇怪

【解决方案2】：

我之前也遇到过类似的问题，发现使用 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout 解决了这个问题

【讨论】：

这是评论，不是答案。