jQuery .fadeTo（） - 淡出后淡出

Question

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!

Answer 1

Try substituting .css() for .removeClass() , .addClass()

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

for

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

Answer 2

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.