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

尝试将.css()替换为.removeClass()，.addClass()

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

的

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

＆＃13;

$(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);
  });

});

＆＃13;

<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>

＆＃13;

Answer 2

我建议你链接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。请注意，我删除了不必要的类分配，因为不能通过类影响样式属性，正如您所尝试的那样。

jQuery .fadeTo（） - 淡出后淡出

2 个答案: