jQuery .fadeTo() -- 淡出后淡入答案

【问题标题】：jQuery .fadeTo() -- Fade back in after fade outjQuery .fadeTo() -- 淡出后淡入
【发布时间】：2016-02-28 20:19:00
【问题描述】：

我对这个项目的目标是有一个 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>

提前致谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我建议你链接 jQuery 方法，并且为了去 0 opacity 和返回，使用 fadeOut 和 fadeIn 代替，以及一个回调来重置背景颜色。像这样。

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

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

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

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

【讨论】：

这几乎是完美的，但是当 div 淡出时，bg-color 会在变为透明之前停留片刻。像这样修复它：$(this).fadeOut(1000, function() { $(this).css("background-color","transparent")}); $(this).fadeIn(1000); 谢谢！
感谢您的更新，编辑了我的答案和小提琴以包含它。

【解决方案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>

【讨论】：