Jquery - FadeIn（）效果不能在腳本循環中工作

Question

當用戶.mouseenters .container我想要鏈接到fadeIn，並且當用戶.mouseleaves .container我想鏈接到fadeOut。到目前爲止，這是工作。我如何減緩過渡？使用5000-10000似乎仍然太快。

$(document).ready(function() { 
    $('.container').mouseenter(function(){ 
     // When mouse enters the .container, #facial slides to center of .container. 
     $('#facial').animate({right: '25%'}) 
     // After #facial slides to center it delays for 500ms.  
        .delay(500) 
     // After #facial delays it expands it's width to 100% of .container. 
        .animate({right: 0, width: '100%'}); 
     // show the span link at bottom as a H2 with center aligned. 
     $('span').fadeIn('slow'); 
    }); 


    $('.container').mouseleave(function(){ 
     // Mouse leaves .container, and span fades out slowly. 
     $('span').css('display','none'); 
     $('span').fadeOut('slow'); 
     // Mouse leaves the .container, #facial shrinks it's width to 50%. 
     // #facial slides back to right of .container. 
     $('#facial').animate({right: 0, width: '50%'}); 

    }); 
}); 

Here is my Demo

Answer 1

代碼的作品，但對顯示跨度

$('span').fadeIn(1000); 

Answer 2

您的問題（至少在的jsfiddle代碼）慢是：

display: none; 

嘗試設置顯示器以阻擋和不透明度爲0. 這是一個造型陷阱許多人enc ounter作爲項目切換顯示動畫過程中會突然彈出沒有這些設置的動畫。我相信這是你要找的影響：

https://jsfiddle.net/sy4pv8z3/52/

注：淡入時間&淡出功能在ms（毫秒）。你應該能夠用500ms或更少的時間實現一個很好的轉換。