0

我第一次使用 jQuery，特别是在我自己的网站上，我使用动画功能使电子邮件选项卡在悬停时略微向下移动（查看右上角：http://www. tommaxwell.me）。但是，我不知道如何让动画在完成后暂停。我可以制作第一个动画以及让它返回到其原始状态所需的动画，但我希望它在用户将光标移开后返回到其原始状态。这是代码，请记住，我意识到它为什么不起作用，我只是不知道解决方案，因为我是 jQuery 新手。

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

2 回答 2

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

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

于 2012-12-03T07:18:39.693 回答