javascript - 如果鼠标快速移动，jQuery 照片库错误

Question

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

这是我的 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="opacity:1;"，因为它会覆盖应用于该元素的任何冲突的 CSS 类规则。

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

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

如果我的代码有问题，请帮助我？不然怎么办？你有什么建议？

Answer 1

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

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

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

希望对你有帮助