Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts

    jQuery background fade Issue

    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
    Last edited by LSCare; 12-11-2011 at 04:21 PM.
    Xipux Design (Currently Unavailable)
    Laurence S Care

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Location
    Swindon, England
    Posts
    124
    Thanks
    3
    Thanked 9 Times in 9 Posts
    I solved the problem by using document.ready
    Xipux Design (Currently Unavailable)
    Laurence S Care


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •