javascript - jQuery Animate 只能以一种方式工作

Question

我有以下代码。

$("#social-links a").hover(function()
{
    $(this).children('span').show();
    $(this).children('span').animate({bottom: '25px', opacity: 1}, 300);
}, function()
{
    $(this).children('span').animate({bottom: '0', opacity: 0}, 300);
    $(this).children('span').hide();
});

这个想法是跨度标签中的文本淡入并向上移动，然后向下移动并淡出。悬停功能可以正常工作，但是当我将鼠标悬停在链接之外时，淡出跨度的动画似乎不起作用。它确实相应地更改了 CSS，但它似乎没有动画。谁能看看我做错了什么？

Answer 1

动画完成后需要调用 hide：

 $(this).children('span').animate({bottom: '0', opacity: 0}, 300, function(){
     $(this).hide();
 });

或者，使用延迟对象：

var $el = $(this).children('span');
$.when($el.animate({bottom: '0', opacity: 0}, 300)).then(function(){
    $el.hide();
})

此时您的代码开始动画，然后立即隐藏 div，因为效果.hide是即时的，而不是被添加到动画队列中。

Answer 2

动画完成时应用回调函数。更多关于.animate()。

$(this).children('span').animate({bottom: '0', opacity: 0}, 300, function() {
    $(this).hide();
});

Answer 3

尝试这个：

$("#social-links a").hover(function() {
    $(this).children('span').show().animate({bottom: '25px', opacity: 1}, 300);
}, function() {
    $(this).children('span').animate({bottom: '0', opacity: 0}, 300).hide();
});