jQuery ホバー:「デフォルト」の div をフェードアウトしながら、非表示の div をフェードインします。

Question

2 つの div (そのうちの 1 つは CSS で非表示) があり、ホバー時に共通スペース内で交互にフェードインとフェードアウトを行っています。

これはマークアップです:

<div id="wrap">

    <div class="image">
        <img src="http://domain.com/images/image.png">
    </div>

    <div class="text hide">
        <p>Text text text</p>
    </div>

</div>

そして、私はこの jQuery コードを適用して画像をフェードアウトし、ホバーするとテキストをフェードインしていました。

<script type="text/javascript">
$(function(){
$('#wrap').hover(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        },
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

しかし問題は、テキスト div がベタベタしてフェードアウトしないことです。常にマウスの動きが速すぎるのです。

どこに解決策があるか知っていますか？

オンラインテストを設定しました: http://paragraphe.org/stickytext/test.html

ヒントをありがとう

Answer 1

あなたのラッパーがそれに幅と高さを持っていない場合は、画像要素が除去されると、それは収縮するあなたには、いくつかの奇妙な結果を得ることができます。確認するには、境界線とラッパーの周りに一定の高さ/幅を追加します。あるいは、少なくとも、画像やテキストのdivに同じ高さを使用します。

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

EDITED

あなたが達成しようとしているものには適用されませんでしたコード例を削除します。

Answer 2

あなたは急速にdivタグの上にマウスを移動し、レース条件を防ぐことができますあなたのホバーアウト機能、上ののを.stop（）を使用してみてください

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').stop().fadeOut(100, function(){
               $('#wrap.image').stop().fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 3

キューを使用してみてください。

<script type="text/javascript">
$(function(){
    $('#wrap').hover(
        function(){
            $('#wrap .image').stop(true).fadeOut(100);
            $('#wrap .image').queue(function(){
                $('#wrap.text').fadeIn(100);
                $(this).dequeue();
            });
        },
        function(){
            $('#wrap .image').stop(true).queue(function(){
                $('#wrap.text').fadeOut(100);
                $(this).dequeue();
            });
            $('#wrap .image').fadeIn(100);
        }
    );
});
</script>

jQueryのキューは、要素ごとにあるので、私はここでやろうとしていること・デ・画像キューの下にテキスト効果を起動することです。

そして、私はあなたに別の提案を与えてみましょう。あなたの意図は、様々な画像は、IDの代わりにクラスを使用するには、この効果を適用する場合。

...
    $('.wrap').hover(
        function(){
            var wrap = this;
            $('.image', wrap).stop(true).fadeOut(100);
            $('.image', wrap).queue(function(){
                $('.text', wrap).fadeIn(100);
                $(this).dequeue();
            });
....

あなたは一度だけこれを呼び出す必要があります。

この方法

Answer 4

あなたのコードでは、テキストのdivをフェードアウトすることはありません。ホバーイベントの両方の機能は、テキスト内の画像やフェードをフェードアウトされます。

Answer 5

あなたは、両方のhover機能で同じコードを持っています。 2番目のケースでのセレクタを置き換えるべきではないでしょうか。

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').fadeOut(100, function(){
               $('#wrap.image').fadeIn(100);                                            
            });
    }
    );
});
</script>

Answer 6

すべてのヒントをありがとう:

扱っている div を詳細に調べているようだったので、mouseenter/mouseleave イベントを使用しようとしました (ここで見られるように）、しかし何も変わりませんでした。そこで、通常の jQuery 命令がすべて応答していないことを確認して、提案された CSS をチェックアウトしました。

そして、そこにはトリックがありました。

私が持っていたもの：

.text p{position:relative; top:-370px; padding: 0 10px}

ブラウザがカーソルによって「静止していない」と解釈する巨大な空のスペースを設定していました（その空のスペースを飛び越えるとテキストが適切に応答するようになっていることに気づきました）。

それで私はそれに変更しました:

.text {margin-top:-370px; padding: 0 10px; float:left}

これにより、「p」タグのみが使用され、2 番目のブロックが div 内の上に配置されますが、その後ろに空のスペースは残りません。

次に、スニペットに関しては、次のようにしても同様に機能します。 マウスエンター / マウスリーブ そして ホバリング :

<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        }
        );
$('#wrap').mouseleave(
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

これは改良版です http://paragraphe.org/nice/test.html