jQuery .fadeTo(） -- 淡出后淡入

jQuery .fadeTo() -- Fade back in after fade out

本文关键字：淡出 淡入 fadeTo jQuery      更新时间：2023-09-26

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

提前感谢！

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

尝试用 .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>

相关文章：