0

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

这是我的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' 类，因为它的不透明度规则比其他规则具有更高的优先级。

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

4

2 回答 2

-1

I would strongly suggest hoverIntent when you play around mouse over and mouse out

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

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

Hope this helps

于 2013-08-05T13:00:49.633 回答
-1

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

于 2013-08-05T13:05:03.723 回答