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>

每当我以正常速度在图像周围移动鼠标时，一切都运行得很好。但是每当我尝试将鼠标快速移动到元素上时，就会导致Toggle按钮出现错误：某些元素仍保留不透明度1.0。

我在每个动画结束后删除了style属性，因为我不希望任何元素保留在style =“opacity：1;”中，因为它会覆盖应用于该元素的任何冲突的CSS类规则。

我已经包含了反馈<div>，以便我可以跟踪是否删除了样式属性，是的，无论鼠标移动得多快，其中的代码都会执行，样式是未定义。

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

如果我的代码有问题，请帮帮我？否则，我该怎么办？你有什么建议？

Answer 1

当你玩鼠标和鼠标时，我强烈建议使用hoverIntent

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

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

希望这有帮助

Answer 2

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

jQuery Photo Gallery如果鼠标快速移动则会出错

2 个答案: