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或更少的时间实现一个很好的转换。