jQuery Animate() 悬停？

Question

我第一次使用 jQuery，特别是在我自己的网站上，我正在使用动画功能使电子邮件选项卡在悬停时略微向下移动（查看右上角：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);
});

这意味着将事件处理程序附加到两个不同的事件：当您将鼠标移到元素上时，它会展开；当您将鼠标移出时，它会减去 - 就像您想要的那样。