如何将函数链接到.animate的结尾？

Question

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

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

Codepen：http://codepen.io/leongaban/pen/DqLCh

我能够使用fadeIn来处理这个问题，但是我需要更多动画选项来动画动画。但是使用.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');
});

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

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

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

任何提示？你会怎么做？

Answer 1

jQuery.animate 还有一个像fadeout这样的回调：

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

  

完整
  类型：功能（）
  动画完成后调用的函数。

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