CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EFH
EFH

Reputation: 441

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

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!

Upvotes: 5

Views: 1783

Answers (2)

Rando Hinn
Rando Hinn

Reputation: 1322

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.

Upvotes: 3

guest271314
guest271314

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

Upvotes: 2

Related Questions