javascript - Jquery - FadeIn()效果在脚本循环中不起作用

Question

当用户 .mouseenters the .container 我想要链接到 fadeIn，当用户 .mouseleaves the .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);