javascript - jQueryAnimateは一方向でのみ機能します

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