0

現在、マウスオーバー/マウスアウト イベントがあります。マウスオーバーでアニメーションが完了した後に div を表示し、マウスアウトでアニメーションが始まる前に div を非表示にしたいと考えています。

アニメーション後に表示される div に対して相対的に表示したり、正しくキューに入れたりすることができません。

http://jsfiddle.net/q2Fh7/

4

2 に答える 2

1

のコールバック関数パラメーターを使用して、関連するにdivをanimate()追加する必要があります。これにも使用する必要があります。これを試して：messageboxhover

$('.box').hover(
    function() {
        var $box = $(this);
        $box.stop().animate(
            { width: '280px', height: '420px'},
            650,
            function() {
                var $div = $("<div></div>").addClass("message").text("Message text");
                $box.append($div);
                $div.fadeIn();
            }
        );
    },
    function() {
        var $box = $(this);
        $(".message", $box).fadeOut(function() {
            $box.stop().animate({ width: '100px', height: '100px' }, 650);
        });        
    }
);

フィドルの例

于 2012-05-09T09:26:23.907 に答える
0

これはまさにあなたが望むものではないと思います。しかし、正しい道にたどり着くと思います： http://jsfiddle.net/r6xbp/

編集：最適化 http://jsfiddle.net/r6xbp/2/

于 2012-05-09T09:22:05.223 に答える