jQuery的淡入（），一點點的幫助，請

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它切換與span的title的價值，但我的問題是，它不淡入的文字。我如何讓它淡入標題？ （均在鼠標和鼠標移出）

HTML是這樣的：

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

Answer 1

你需要調用一個fadeIn後fadeOut已經完成。這是因爲，如果它已經可見，那麼另一個fadeIn將不會對它產生任何影響。所以，你必須首先fadeOut，然後一旦完成，請撥打fadeIn。

Both，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>