2

私が使用しているフィドル: http://jsfiddle.net/Hu4bg/1/

垂直メニューを作成しようとしていますが、リンクの上にマウスを置いたときに、画像 (コンテンツがあるので div の方が良いでしょう) を下にスライドさせたいのですが、別のリンクがホバーすると、最後にスライドした画像の上を何度もスライドします。

z-index 値を変更する必要があると思いますが、JQuery を介してこのことを制御する方法がわかりません。私のフィドルの簡単なヒントを教えてもらえますか?

$(document).ready(function() {
    $("#leftmenu a").hover(function() {
        $("#img1").slideDown(250);
    });

    $("#leftmenu a").mouseleave(function() {
        $("#img1").slideUp(250);
    });
});
4

3 に答える 3

1

こんな感じですか？http://jsfiddle.net/Hu4bg/3/

コードを 1 つのイベントに凝縮し、動作方法を変更しました(複数の画像ボックスの ID をリンクのクラスに一致させます)。

$("#leftmenu a").hover(function() {
    $("[id^=img]:not([id=" + $(this).attr("class") + "])").slideUp(250);
    $("#" + $(this).attr("class")).slideDown(250);
});

また、タグimg内のクラスに一致する ID を使用して、さらに 2 つのタグを追加しました。a

<div id="img1">Image here</div>
<div id="img2">Image here</div>
<div id="img3">Image here</div>

<ul>
    <li> <a class="img1" href="#">Image 1</a></li>
    <li> <a class="img2" href="#">Image 2</a></li>
    <li> <a class="img3" href="#">Image 3</a></li>
</ul>
于 2013-02-27T12:00:59.993 に答える
0

.hover2 つの引数を取ります。1 つはマウス エンター用、もう 1 つはマウス リーブ用です。

$("#leftmenu a").hover(function() {
    $("#img1").slideDown(250);
}, function() {
    $("#img1").slideUp(250);
});
于 2013-02-27T11:43:49.407 に答える
0

を使用して、純粋な css で実際にこれを行うことができますCSS Animation。

これのLIVE DEMOがあります。

于 2013-02-27T11:58:29.480 に答える