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>

提前感谢您！

- EFH

Answer 1

我建议您链式使用jQuery方法，并在需要将元素透明度变为0时使用fadeOut，需要恢复时使用fadeIn，并添加回调函数来重置背景颜色。示例代码如下。

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

fadeOut 有淡出效果，将透明度淡化为0，在本例中需要1秒钟的时间。 fadeIn 则相反，回调重置颜色。如果您不想进行颜色重置，请改用以下方法。

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

这里有一个jsFiddle。请注意，我已经删除了不必要的类别分配，因为你不能通过类别影响样式属性，就像你试图做的那样。

- Rando Hinn

---

这几乎是完美的，但当div淡出后，背景颜色在变为透明之前会停留一小段时间。我像这样修复它：$(this).fadeOut(1000, function() { $(this).css("background-color","transparent")}); $(this).fadeIn(1000); 谢谢！ - EFH

感谢更新，我已经编辑了我的回答和代码示例以包含该内容。 - Rando Hinn

Answer 2

尝试使用 .css() 替换 .removeClass() 和 .addClass()。

$foo.css('background-color', "");
$foo.css('opacity', '1');

对于

$foo.removeClass('background-color');
$foo.addClass('opacity', '1');

---

$(function() {

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

  function getRandomColor() {

    $foo.css("background-color", "");
    $foo.css("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);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<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>

- guest271314