0

div のホバー アニメーションを作成しようとしていますが、ユーザーがホバーしたときに元の位置に戻りたいと思っています。私は持っている

$('.Img').live({
            mouseover: function(){

            $(this).css({'cursor': 'pointer'});
            var tooltip=$(this).next().attr('id');


          var tooltipDiv=$('#tooltip-' + tooltip);

          tooltipDiv.css('display', 'block');
          tooltipDiv.animate({ opacity: 0 }, 0);

          tooltipDiv.animate({'opacity':'1','top':'-=10'},500);

        },
        mouseout: function (){            
          $instance = $(this).css({'cursor': 'auto'});

          //back to the original position....but not sure how to do it....
           tooltipDiv.animate.....

        }
        })

Jquery 1.6を使用しているため、ライブを使用する必要があります。助けてくれてありがとう...

4

1 に答える 1

0

最初のステップで行ったように、それらを元の位置に「アニメート」して戻しますか? それとも、すぐに元の場所に戻してもらいたいですか?

いずれにせよ、逆に作業するだけです。あなたのアニメーションは非常に最小限であり、開始点が ( opacity: 0、top: [$#]+=10) で始まる場所を知っています。あなたが遭遇する大きな問題は、突然のアニメーション停止との不一致です. top+=10イベントで項目を移動するよう jQuery に指示するとmouseout、アニメーション キューが現在どのように設定されているかに基づいて、予想していた場所とは異なる場所に移動する可能性があります (これは、迅速なマウスイン/マウスアウトで多く発生します)。または、アニメーション全体を引き続き実行することもできますが、これも奇妙に見えます。

.stop()アニメーションを適切に動作させるために使用する方法を読んでください: jQuery .stop()

トリックは、予期しないものではなく、最初の開始位置に戻すことです。ピクセル値をコードにハードコーディングするのと同じくらい簡単です。または、ロード時に初期位置を読み取る変数を次のように設定します。

$('.Img').live({
    mouseover: function(){
      selector = $(this).next();
      sel_top = selector.css('top');
      sel_opa = selector.css('opacity');

      selector.animate({'opacity':'1','top':'-=10'},500);

    },
    mouseout: function (){            
      selector.animate({'opacity' : sel_opa, 'top' : sel_top},500);
    }
})
于 2012-08-21T23:18:34.623 に答える