jquery - mousenter/mouseleaveを1つの関数に組み合わせる

Question

これらの2つの機能について考えてみましょう。これら2つを1つのjQuery関数にまとめる方法はありますか？

$("#help").mouseenter(function(){
    $(this).animate({bottom: '+=100',});
});

$("#help").mouseleave(function(){
    $(this).animate({bottom: '-=100',});
});

Answer 1

http://api.jquery.com/hover/を参照してください

$("#help").hover(function() {
    $(this).animate({
        bottom: '+=100',
    });
}, function() {
    $(this).animate({
        bottom: '-=100',
    });
});​

.hover（）メソッドは、mouseenterイベントとmouseleaveイベントの両方のハンドラーをバインドします。これを使用して、マウスが要素内にあるときに要素に動作を適用することができます。呼び出し$(selector).hover(handlerIn, > handlerOut)は次の略記です。$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Answer 2

$("#help").on('mouseenter mouseleave', function() {

});

代わりに使用：

$('#help').hover(
  function() {
     // code for mouseenter 
     $(this).animate({bottom: '+=100',});
  },

  function() {
    // code for mouseleave
    $(this).animate({bottom: '-=100',});
  }
);