我有以下代码。
$("#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,但它似乎没有动画。谁能看出我是否做错了什么?
最佳答案
动画完成后需要调用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
的效果是立即的,而不是添加到动画队列中。
关于javascript - jQuery Animate 仅以一种方式工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15346108/