jQuery Анимация работает только в одном направлении

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

Попробуйте это:

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

Answer 2

Вам нужно позвонить шкурку после завершения анимации:

$(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 3

Применить функцию обратного вызова, когда анимация завершена. Подробнее о .animate().

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