0

私はこのような状況にあり、サイトにデフォルトのテキストを表示したいのですが、3 つの異なる画像にカーソルを合わせると、デフォルトのテキストが 3 つの異なるテキストに変わるはずです。

フィドルでわかるように、これを実現しましたが、マウスを 3 つの画像すべての上にすばやく移動すると、すべてのテキストが正しく消えるわけではありません。どうすればこれを達成できますか?

画像の私の JavaScript コード:

$().ready(function () {
 $("#image1").hover(

 function () {
     $("#default").hide(timer,

     function () {
         $("#content1").show(timer,

         function () {})
     });
 },

 function () {
     $("#content1").hide(timer, function () {
         $("#default").show(timer,

         function () {});
     });
 });
});

ps。これが HTML と CSS だけで可能であれば、それも問題ありません。

私のjsfiddle: http://jsfiddle.net/T4BCx/4/

4

2 に答える 2

4

これは、アニメーション コマンドのキューイングの性質によるものです。この場合、要素を表示/非表示にする前に、以前にキューに入れられたすべてのアニメーションを jQuery に強制的に完了する必要があります。これを行うには.stop()を使用できます。

また、ソリューションは非常に複雑に見えます。シンプルにするためにいくつかの変更を加えました

<table>
    <tr>
        <td>
            <img src="http://placehold.it/150x150" id="image1" alt="description" width="150px" class="content-img" data-target="#content1" />
        </td>
        <td>
            <img src="http://placehold.it/150x150" id="image2" alt="description" width="150px" class="content-img" data-target="#content2" />
        </td>
        <td>
            <img src="http://placehold.it/150x150" id="image3" alt="description" width="150px" class="content-img" data-target="#content3" />
        </td>
    </tr>
    <tr>
        <td colspan="3" style="height:100px">
            <div id="default">
                 <h1>default</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content1">
                 <h1>content 1</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content2">
                 <h1>content 2</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div id="content3">
                 <h1>content 3</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </td>
    </tr>
</table>

それから

//initial
var timer = 200;
jQuery(function ($) {
    var inside = false;
    $("#content1, #content2, #content3").hide();
    $(".content-img").hover(function () {
        inside = true;
        var $target = $($(this).data('target'));
        $("#default").stop(true, true).hide(timer, function () {
            if (inside) {
                $target.stop(true, true).show(timer);
            }
        });
    }, function () {
        inside = false;
        $($(this).data('target')).stop(true, true).hide(timer, function () {
            if (!inside) {
                $("#default").stop(true, true).show(timer);
            }
        });
    });

});

デモ:フィドル

于 2013-10-25T09:13:00.487 に答える
1

私はこのように試しました

$("img").hover(function () {
    var value = $(this).attr("id").substr($(this).attr("id").length-1);
    $('div[id="default"]').find('h1').text("Content" + value);
    $('div[id="default"]').find('p').text("Content of Image" + value);
});

$("img").mouseout(function(){
$('div[id="default"]').find('h1').text("Default");
    $('div[id="default"]').find('p').text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
})

ライブデモ

于 2013-10-25T09:32:29.567 に答える