jQuery .fadeTo（） - 淡出后淡入 [英] jQuery .fadeTo() -- Fade back in after fade out

问题描述

这个项目的目标是创建一个div，当它悬停时，选择一个随机背景颜色，然后淡出。但是，我希望能够返回并重新悬停在div上，并重新开始流程。到目前为止，我只设法获得随机颜色并使其淡出，但是当我将鼠标悬停再次悬停时，没有任何反应。试图去除不透明和背景类无济于事。这是我的代码到目前为止：

$ $ p $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ foo = $（'。foo'）;

函数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 - divs to test

 < 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 （背景色，透明）
}）; 
 $（this）.fadeIn（1000）; 
  

fadeOut 具有淡入淡出效果0不透明度，在这种情况下为1秒。 fadeIn 则相反，回调函数会重置颜色。如果您不想重置颜色，请改为使用此颜色。

  $（this）.fadeOut（1000）.fadeIn（ 1000）; 
  

以下是的jsfiddle 。请注意，我已经删除了不必要的类分配，因为不能通过类影响样式属性，正如您试图做的那样。

My goal with this project is to have a div that, when hovered over, picks a random background color and then fades out. However, I want to be able to go back and hover again over the div and have the process start over again. So far, I've only managed to get the random color and have it fade out, but when I mouse over to hover again, nothing happens. Tried removing the opacity and background classes to no avail. Here's my code so far:

$(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 - Just a bunch of divs to test

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

Thanks in advance!

解决方案

I suggest you chain jQuery methods, and for going to 0 opacity and back, use fadeOut and fadeIn instead, along with a callback to reset the background color. Like so.

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

The fadeOut has the effect of fading to 0 opacity, in this case during 1 second. fadeIn does the opposite, the callback resets the color. If you do not want a color reset, do just this instead.

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

Here's a jsFiddle. Notice, that I removed the unneccessary class assignments, as you can not affect styling properties via classes, as you've tried to do.

这篇关于jQuery .fadeTo（） - 淡出后淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！