jQuery Animate（）悬停？

Question

我第一次使用jQuery，特别是在我自己的网站上，我正在使用animate功能让电子邮件标签在悬停时稍微向下移动（在右上角查看：{{3 }}）。但是，我不知道如何在完成后暂停动画。我可以制作第一个动画和动画使其恢复到原始状态，但是我希望它在用户移开光标后返回到原始状态。这是代码，请记住我知道为什么它不起作用，我只是不知道一个解决方案，因为我是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);
});

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