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的效果是立即的，而不是它被添加到动画队列中。

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

jQuery Animate只能以一种方式工作

3 个答案: