jQuery Animate（）懸停了嗎？

Question

我是第一次使用jQuery，尤其是在我自己的網站上，並且使用animate函數使懸停時的電子郵件標簽略微向下移動（請在右上角查看： http：// www。 tommaxwell.me ）。 但是，我不知道如何在完成后使動畫暫停。 我可以制作第一個動畫以及使它返回其原始狀態所需的動畫，但是我希望在用戶將其光標移開后使其返回其原始狀態。 這是代碼，記住我知道為什么它不起作用，因為我是jQuery新手，所以我不知道解決方案。

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

Answer 1

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
});

Answer 2

您應該使用函數$element.mouseover(fn)和$element.mouseout(fn) 。

所以應該是這樣的：

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

這意味着將事件處理程序附加到兩個不同的事件：將鼠標移到該元素上時，它會展開，而將鼠標移出它時，它會減去-隨心所欲。