0

私は、特に自分の Web サイトで初めて jQuery を使用しています。また、アニメーション機能を使用して、ホバーしたときに電子メール タブをわずかに下に移動させています (右上で確認してください: http://www. tommaxwell.me）。しかし、完成後にアニメーションを一時停止させる方法がわかりません。最初のアニメーションと必要なアニメーションを元の状態に戻すことはできますが、ユーザーがカーソルを離した後に元の状態に戻したいです。ここにコードがあります。なぜそれが機能しないのかを理解していることを覚えておいてください。私はjQueryを初めて使用するため、解決策がわかりません。

$("#emailme").hover(function(){
  $("#emailme").animate({
    paddingTop: "15px"
  }, 100, function() {
    $("#emailme").animate({
        paddingTop: "10px"
    }, 100)
  });
});
4

2 に答える 2

1

の 2 番目の引数hoverは、ユーザーがマウスを離したときに呼び出すコールバックです。

$("#emailme").hover(function() {
    $(this).animate({
        paddingTop: "15px"
    }, 100);
}, function() {
    $(this).animate({
        paddingTop: "10px"
    }, 100)
});

したがって、一般的な考え方は次のとおりです。

$('selector').hover(function(){
    //stuff to do on mouse in
}, function(){
    //stuff to do on mouse out
});
于 2012-12-03T07:18:52.237 に答える
0

関数$element.mouseover(fn)とを使用する必要があり$element.mouseout(fn)ます。

したがって、次のようになります。

$("#emailme").mouseover(function(){
    $(this).animate({
        paddingTop: "15px"
    }, 100);
}).mouseout(function(){
    $(this).animate({
        paddingTop: "10px"
    }, 100);
});

これは、イベント ハンドラーを 2 つの異なるイベントにアタッチすることを意味します。要素の上にマウスを移動すると拡張し、マウスを離すと減算します - 必要に応じて。

于 2012-12-03T07:18:39.693 に答える