2 

$(function() {
  $('#wrap').hover(
    function() {
      $('#wrap .image').fadeOut(100, function() {
        $('#wrap .text').fadeIn(100);
      });
    },
    function() {
      $('#wrap .text').fadeOut(100, function() {
        $('#wrap .image').fadeIn(100);
      });
    }
  );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">
  <div class="image">
    <img src="http://example.com/images/image.png">
  </div>
  <div class="text hide">
    <p>Text text text</p>
  </div>
</div>

2つのdiv（そのうちの1つはCSSで非表示）があり、ホバーすると、共通のスペース内で交互にフェードインおよびフェードアウトします。

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

ただし、問題は、テキストdivがスティッキーになり、フェードアウトしないことです。常に、マウスの動きが速すぎます。

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

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

ヒントをありがとう

4

6 に答える 6

3

ホバーアウト関数で.stop（）を使用してみてください。これにより、マウスをdivの上にすばやく移動する競合状態が防止されます。

<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>
于 2009-07-23T10:23:53.930 に答える
3

ラッパーに幅と高さがない場合、画像要素が削除されると縮小するため、奇妙な結果が生じる可能性があります。表示するには、ラッパーの周囲に境界線と固定の高さ/幅を追加します。または、少なくとも画像とテキストのdivに同じ高さを使用します。

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

編集済み

達成しようとしていることに当てはまらないコード例を削除しました。

于 2009-07-23T11:25:33.853 に答える
2

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

<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の代わりにclassを使用してください。

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

このように、これを1回だけ呼び出す必要があります。

于 2009-07-23T11:32:22.873 に答える
0

コードがテキストdivをフェードアウトすることはありません。ホバーイベントの両方の機能により、画像がフェードアウトし、テキストがフェードインします。

于 2009-07-23T10:13:18.663 に答える
0

両方の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>
于 2009-07-23T10:15:00.143 に答える
0

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

（ここに表示されているように）処理している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内に配置されますが、背後に空きスペースの痕跡はありません。

次に、スニペットに関しては、mouseenter/moseleaveおよびhoverでも機能します。

<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

于 2009-07-23T12:16:19.440 に答える