2

私はする必要があります、div "change"は終了を待ち、div "username"をスライドダウンし、スライドアップを開始し、アウトホバーで同じです

デモ： http： //jsfiddle.net/2jHBQ/3/

 <div id="avatar">
        <div id="username">Madona</div>
        <div id="change">Change profile</div>
    </div>

$("#avatar").hover(function () {

    $("#username").slideToggle(250);
     $("#change").slideToggle(250);
});
4

4 に答える 4

2

私があなたの質問を正しく理解している場合、インデントされたイベントのコースは次のとおりです。

  • #avatarホバーされます
    1. #username下にスライドして非表示
    2. #changeショーとスライドアップ
  • #avatarホバーされていない
    1. #change下にスライドして非表示
    2. #usernameショーとスライドアップ

この場合、順序が逆になるため、2つの異なるハンドラー（1つはマウス入力用、もう1つはマウス離脱用）が必要です。

$("#avatar").hover(function () {
    $("#username").slideToggle(250, function () {
        $("#change").slideToggle(250);
    });
}, function () {
    $("#change").slideToggle(250, function () {
        $("#username").slideToggle(250);
    });
});
于 2013-01-27T15:51:33.507 に答える
2

slideToggle（）のコールバックを使用する必要があります。また、途中でそれが必要な場合は、次のように、逆の順序でのみ、hover （）メソッドのhandlerOut関数も指定する必要があります。

$("#avatar").hover(function () {
    $("#username").slideToggle(250, function () {
        $("#change").slideToggle(250);
    });
}, function () {
    $("#change").slideToggle(250, function () {
        $("#username").slideToggle(250);
    });
});

デモ-次々にスライド-双方向

于 2013-01-27T15:52:12.803 に答える
0

.delay（）メソッドを使用できます。ご覧のとおり、ここでは非常にうまく機能します。

http://jsfiddle.net/2jHBQ/4/

$("#avatar").hover(function () {

    $("#username").slideToggle(250);
     $("#change").delay(250).slideToggle(250);
});

ここでAPIを準備できます：http： //api.jquery.com/delay/

于 2013-01-27T15:48:33.167 に答える
0

私があなたが何を望んでいるのか理解しているかどうかわかりません。これを試して？

    $("#avatar").hover(function () {
$("#username").slideToggle(250,function () {
        $("#change").slideToggle(250);
    });  

});

またはあなたが使用することができます.mouseenter()

于 2013-01-27T15:45:29.300 に答える