Resolved jQuery background fade Issue

LSCare · 12-11-2011, 03:17 PM

Hello All,

My head is stuffed! I am trying to set something to fade a background image on a div.

Something is stopping it from working and no matter where I look, I just cannot see a (probably clear as day) error. Here goes.

The page is here.

The code is as follows...

HTML

Code:

<div id='box'>
	<div id='logo'></div>
	<div id='logo_text'></div>
	<div id='nav_l'><div class='nav_l'></div></div>
	<div id='nav_r'><div class='nav_r'></div></div>
</div>

CSS

Code:

#nav_l{
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 515px 0px 0px 100px;
}

#nav_l .nav_l{
	position: absolute;
	width: 50px;
	height: 50px;
	background:url(../images/nav_l_up.png) center no-repeat;	
}

#nav_l .nav_l_ho{
	position: absolute;
	width: 50px;
	height: 50px;
	background:url(../images/nav_l_ho.png) center no-repeat;
}

jQuery

Code:

$("#nav_l").hover(function () {
    $(".nav_l").fadeOut("slow", function () {
        $(this).addClass("nav_l_ho").fadeIn("slow", function () {
            $(this).removeClass("nav_l_ho");
        });
    });
});

I hope someone can see an error!

update

I realised I may be having a problem with the div over which I am using the hovering event so I have adjusted the css and html to the following:

html

Code:

<div id='box'>
	<div id='logo'></div>
	<div id='logo_text'></div>
	<div id='nav_l' class='nav_l'></div>
	<div id='nav_r' class='nav_r'></div>
</div>

css

Code:

#nav_l{
	position: absolute;
	
	width: 50px;
	height: 50px;
	
	margin: 515px 0px 0px 100px;
}

.nav_l{
	background:url(../images/nav_l_up.png) center no-repeat;	
}

.nav_l_ho{
	background:url(../images/nav_l_ho.png) center no-repeat;
}

Kind Regards
Laurence S Care

LSCare · 12-11-2011, 04:22 PM

I solved the problem by using document.ready