javascript - jQuery .fadeTo() -- 淡出后淡入

Question

我在这个元素中的目标是让一个 div 在悬停时选择一个随机的背景颜色然后淡出。但是，我希望能够返回并再次将鼠标悬停在 div 上并重新开始该过程。到目前为止，我只设法获得随机颜色并让它淡出，但是当我将鼠标悬停再次悬停时，什么也没有发生。尝试删除不透明度和背景类无济于事。到目前为止，这是我的代码:

$(function() {


    var $foo = $('.foo');

    function getRandomColor() {

        $foo.removeClass('background-color');
        $foo.addClass('opacity', '1');
        var length = 6;
        var chars = '0123456789ABCDEF';
        var hex = '#';
        while(length--) hex += chars[(Math.random() * 16) | 0];
        return hex;
        }


    $foo.mouseenter(function(){

        $(this).css('background-color', getRandomColor());


        });

    $foo.mouseleave(function(){

        $(this).fadeTo( 1000, 0 );

        });


    });

HTML - 只是一堆要测试的 div

<div class="foo box">Hello world</div>
<div class="foo box">Hello world</div>
<div class="foo box">Hello world</div>
<div class="foo box">Hello world</div>
<div class="foo box">Hello world</div>
<div class="foo box">Hello world</div>

提前致谢!

Answer 1

我建议您链接 jQuery 方法，并使用 fadeOut 和 fadeIn 来代替 0 不透明度，以及重置背景颜色的回调。就像这样。

$(this).fadeOut(1000, function() { 
    $(this).css("background-color","transparent")
}); 
$(this).fadeIn(1000);

fadeOut 具有淡化为 0 不透明度的效果，在本例中为 1 秒。 fadeIn 做相反的事情，回调重置颜色。如果您不想重置颜色，请改为执行此操作。

$(this).fadeOut(1000).fadeIn(1000);

这是一个 jsFiddle .请注意，我删除了不必要的类分配，因为您不能通过类影响样式属性，正如您尝试做的那样。