0

これは非常に奇妙なバグです。マウスが要素上を非常に速く移動している場合を除いて、ほとんどの場合に機能するため、私のコードはおそらく正しいでしょう。

ここに私のCSSがあります:

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

ここに私のHTML本文があります：

画像をクリックして、永続的な表示を切り替えます。または、ここをクリックしてすべてを切り替えます: Toggle

<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 のままです。

要素に適用されている競合する CSS クラス ルールが上書きされるため、要素を style="opacity:1;" のままにしたくないため、各アニメーションが終了したら style 属性を削除します。

<div>スタイル属性が削除されたかどうかを追跡できるように、フィードバックを含めました。はい、マウスがどれだけ速く動いても、そこにあるコードが実行され、スタイルは未定義です。

また、スタイルシートは上から下に読み込まれることを知っているので、「選択された」クラスを「fadeto」の後に含めました。これは、その不透明度ルールが他のクラスよりも優先されるためです。

コードに問題がある場合は、助けてください。それ以外の場合は、どうすればよいですか? 何を指示してるんですか？

4

2 に答える 2

-1

以前にも同様の問題があり、mouseover と mouseout ではなく mouseenter と mouseleave を使用すると問題が解決することがわかりました

于 2013-08-05T13:05:03.723 に答える