0

別の div の上から下にアニメーション化する div があります。私は現在、元の状態が上/上である場所で、mouseenter/leave と JS アニメーションを使用して再生しています。ホバー/マウス入力して下に移動し、マウスを離したりホバーオフしたりしたい。もう一度ホバーすると、アニメーションでトップ/スタートに戻ります。

私は最初に mouseenter/leave を使用しましたが、これは、mouseleave 時に状態を同じままにしたいので、明らかに必要なことを行いません。では、このニーズに最適な機能は何でしょうか? 私はまだ用語を学んでおり、質問をより適切に表現する方法につまずいています。

コード：

    function init() { 
        mouseenter: function(){
            $(".ltrP").stop(true, true).animate({
                marginTop:"170px"
            }, 
            {
                duration: 1000,
                easing: "easeOutBounce"
            });
        },
        mouseleave: function(){
            $(".ltrP").stop(true, true).animate({
                marginTop: "0px"
            },
            {
                duration: 1000,
                easing: "easeInBounce"
            });   
        }
    });
}
window.onload = init;
4

3 に答える 3

1

次のようにコードを書き直すことができます。

$(document).ready(function(){
    init();
});
function init() {
    $.hover(function(){
        $(".ltrP").stop(true, true).animate({
            marginTop:"170px"
        }, 
        {
            duration: 1000,
            easing: "easeOutBounce"
        });
    },
    function(){
        $(".ltrP").stop(true, true).animate({
            marginTop: "0px"
        },
        {
            duration: 1000,
            easing: "easeInBounce"
        });   
    });
}
于 2012-07-12T05:09:37.527 に答える
1

これを行う方法はたくさんあります。おそらく、最も簡単に概念化するのは、アニメーション化されたアイテムにクラスを追加することです。2 つの別々の mouseenter 関数を書きたいとします。

最初の関数では、ダウン アニメーションをトリガーし、入力した項目にクラスを追加します。クラスを「moveddown」または明白なものと呼びます。

次に、2 番目の mouseenter 関数を記述します。クラスを持つアイテムがマウスセンタリングされると、アニメーション化され、クラスが削除されます。

これについてはjQueryを忘れてくださいhover。これは、mouseenter/mouseleave の単なるラッパーです。問題を引き起こす可能性があります。jQueryのドキュメントはそれについて警告しています。特にこのようなトリッキーなことをしようとしている場合は、通常は mouseenter 関数と mouseleave 関数を別々に書く方が良いでしょう。

于 2012-07-12T05:18:49.453 に答える
1

コードを編集しました。説明についてはコメントを参照してください。

$(document).ready(function(){ // Runs when document is loaded

    $(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
        var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
        $(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
            marginTop: goTo // Animate to the just set variable
        }, 1000);
    });

});

ここでデモを参照してください: http://jsfiddle.net/hnDmt/

(そして、イージング「easeInBounce」がうまくいかなかったので、削除しました。(おそらく jQuery UI イージング?))

于 2012-07-12T05:30:29.800 に答える