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

这个想法是，span 标签中的文本淡入并向上移动，然后向下移动并淡出。它对于悬停功能工作正常，但是当我将鼠标悬停在链接之外时，淡出跨度的动画似乎不起作用。它确实相应地改变了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 的效果是立即的，而不是添加到动画队列中。