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。这是许多人遇到的样式陷阱，因为在动画期间切换显示的项目将突然弹出而没有设置动画。我相信这是你正在寻找的效果：

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

注：fadeIn＆amp;的时间fadeOut函数以ms（毫秒）为单位。你应该能够在500毫秒甚至更短的时间内实现一个很好的过渡。

Jquery - FadeIn（）效果在脚本循环中不起作用

2 个答案: