JQuery FadeIn(), немного помочь, пожалуйста

Question

У меня есть очень простой сценарий (как я являюсь JQ нуб)
Его так просто, я даже не буду делать скрипку, но будет размещать код ниже:

 var tip; 
        var orig; 
        var switched = 0; 



        $('.output').hover(function() { 

         tip = $(this).attr('title'); 
         orig = $(this).text(); 


         if(tip != orig) 
         { 
         $(this).text(tip).fadeIn(2000); 
         switched = 1; 
         } 

        }, function() { 

         if(switched == 1) 
         { 
         $(this).text(orig).fadeIn(); 
         } 

        }); 

он работает, как ожидалось, так как я не отвлекаясь от span с «выходом» класса он переключает значение с title этого span, но моя проблема в том, что не FadeIn текст. Как заставить его исчезать в названии? (Как на мышь в и мыши из)

HTML как это:

<span class="output italic" title="Computer_Science.jpg">Computer_Science.j...</span> 

Answer 1

Вам нужно позвонить fadeIn после fadeOut завершена. Это потому, что если он уже виден, то другой fadeIn не будет иметь никакого эффекта на него. Итак, вы должны сначала fadeOut, а затем, как только это будет завершено, вызовите fadeIn.

Оба, fadeIn и fadeOut имеют обратный вызов как параметр, который вызывается после завершения эффекта. Заверните свой код как анонимный обратный вызов, как этот параметр, на fadeOut.

Отрывок:

var tip; 
 
var orig; 
 
var switched = 0; 
 

 
$('.output').hover(function() { 
 
    tip = $(this).attr('title'); 
 
    orig = $(this).text(); 
 
    if (tip != orig) { 
 
     $(this).fadeOut(function() { 
 
      $(this).text(tip).fadeIn(); 
 
      switched = 1; 
 
     }); 
 
    } 
 
}, 
 
    function() { 
 
     if (switched == 1) { 
 
      $(this).fadeOut(function() { 
 
       $(this).text(orig).fadeIn(); 
 
       switched = 0; 
 
      }); 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span title="Title" class="output">Hello</span>