Joel Joel - 3 months ago 13
jQuery Question

Fade background on mouseleave and unfade on mouseenter. jQuery

I'm trying to unfade the background when I enter the mouse on my webpage but it doesn't seem to work. I've tried looking around on here for a similar solution but unable to do so.

jQuery:

//fade
$("html").mouseleave(function(){
$('#intro').fadeTo('slow',0.33,function(){
$("#intro").css("background");
});
});
//unfade

$("html").mouseenter(function(){
$('#intro').fadeTo('slow',1,function(){
$("#intro").css("background");
});
});


Fading works perfectly, but the unfading part is what i'm having trouble with.

Answer

The actual fade works fine. The issue will be because of the syntax error here:

$("#intro").css({background});

You are using object notation but havent passed a valid object (key, value). If it is supposed to be a variable then remove the braces, or give the property background a value if it is supposed to be an object.

$("html").mouseleave(function(){
        $('#intro').fadeTo('slow',0.33,function(){
        $("#intro").css({background: 'green'});
        });
});

$("html").mouseenter(function(){
        $('#intro').fadeTo('slow',1,function(){
        $("#intro").css({background: 'red'});
        });
});
#intro {
width: 100px;
height: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
</div>