javascript - 如何将函数链接到.animate的末尾？

Question

我有一个工具提示和 2 个链接。

当您翻转每个链接时，工具提示会将不透明度从 0 设置为 1，我还需要更改文本。

代码笔： http ://codepen.io/leongaban/pen/DqLCh

我可以使用淡入淡出来处理这个问题，但是我需要更多的动画选项来制作动画。但是，.animate在您将鼠标移出第二个链接后，我不确定如何重置文本。如何在不透明度更改后基本上将文本切换回，以便在工具提示动画时看不到文本更改。

第一个链接代码：

$('#search').unbind('mouseover').bind('mouseover', function () {
  $('#search-tooltip').animate({
      opacity:'1'
  });
});

$('#search').unbind('mouseout').bind('mouseout', function () {
  $('#search-tooltip').animate({
  opacity:'0'
  });
});

第二个链接代码：

$('#tip').unbind('mouseover').bind('mouseover', function () {
    $('#search-tooltip span').text('2nd Copy');
    $('#search-tooltip').animate({
      opacity:'1'
    });
});

$('#tip').unbind('mouseout').bind('mouseout', function () {
    $('#search-tooltip').animate({
      opacity:'0'
    });
    $('#search-tooltip span').text('First Copy');
});

如果您将鼠标悬停在第二个链接（“提示”）上然后鼠标悬停，您可以看到文本在淡出时发生变化。

当我以前使用淡出时，我能够解决这个问题：

$('#search-tooltip').fadeOut(function () {
    $('#search-tooltip span').text('First Copy');
});

有小费吗？你会怎么做？

Answer 1

jQuery.animate还有一个像淡出一样的回调：

.animate( properties [, duration ] [, easing ] [, complete ] )

complete
类型：Function()
动画完成后调用的函数。

$('#tip').unbind('mouseout').bind('mouseout', function () {
    $('#search-tooltip').animate({
      opacity:'0'
    }, function(){
       $('#search-tooltip span').text('First Copy');
    });
});