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 Image Fading

    I have struggled and struggled to find a script which creates a simple faded button (where the image is in the background attribute) for a long time.

    Everything that I have found has used some weird attempt through add class and remove class which results inevitably in a fade through black (not what I wanted).

    So... I came up with a simple device (a bit of a cheat) for avoiding needing to fade through black or use complex jQuery functions.

    Insert:
    The reason I wanted this to be in the background image is because I want a crisp site in which images are not dragable or easily copied.
    It is also a tool which could be used outside of the navigational concept shown.


    Notes:
    • This example creates 2 buttons though the method is not limited to 2 (advise changing the l or r to a number or representative letter for more than two i.e. index: i about: a.
    • The two buttons in this example are a simple left right method.
    • To event catching div in this method will always be #nav_?_inv.
    • The inv suffix stands for Invisible! Though it is visible to the browser it must remain invisible to any human. It cannot hold an image or BG colour.
    • The mouseenter and mouseleave events can be changed to mouseover and mouseout respectively.
    • CSS positioning is crucial (this is why I have used absolute and margins to position my divs.
    • All CSS rules MUST be applied to all divs regarding size and position
    • An example of the working script is currently (12/12/11) available here, though I cannot guarantee it will stay.


    HTML
    Code:
    <!-- navigation -->
    <div>
    	<div id='nav_l_bot'></div>
    	<div id='nav_l_top'></div>
    	<div id='nav_l_inv'></div>
    	<div id='nav_r_bot'></div>
    	<div id='nav_r_top'></div>
    	<div id='nav_r_inv'></div>
    </div>
    CSS
    Code:
    #nav_l_bot{
    	position: absolute;
    	width: 50px;
    	height: 50px;
    	margin: 515px 0px 0px 100px;
    	background:url(../images/nav_l_up.png) center no-repeat;
    }
    
    #nav_r_bot{
    	position: absolute;
    	width: 50px;
    	height: 50px;
    	margin: 515px 0px 0px 450px;
    	background:url(../images/nav_r_up.png) center no-repeat;	
    }
    
    #nav_l_top{
    	// All the same as nav_l_bot except hover image below
    	background:url(../images/nav_l_ho.png) center no-repeat;
    }
    
    #nav_r_top{
    	// All the same as nav_r_bot except hover image below
    	background:url(../images/nav_r_ho.png) center no-repeat;	
    }
    
    #nav_l_inv{
    	// All the same as nav_l_bot except NO image
    }
    
    #nav_r_inv{
    	// All the same as nav_r_bot except NO image
    }
    jQuery
    Code:
    $(document).ready(function(){
    
    	// set tops to gone!
    	$("#nav_l_top").fadeOut(0);
    	$("#nav_r_top").fadeOut(0);
    
    	// left nav over
    	$("#nav_l_inv").mouseenter(function(){ 
    		$("#nav_l_top").fadeIn(200); 
    	});
    
    	// left nav out
    	$("#nav_l_inv").mouseleave(function(){ 
    		$("#nav_l_top").fadeOut(200); 
    	});
    
    	// right nav over
    	$("#nav_r_inv").mouseenter(function(){ 
    		$("#nav_r_top").fadeIn(200); 
    	});
    
    	// right nav out
    	$("#nav_r_inv").mouseleave(function(){ 
    		$("#nav_r_top").fadeOut(200); 
    	});
    
    });
    I hope other people find this helpful!
    Last edited by LSCare; 12-12-2011 at 10:11 AM. Reason: updated notes
    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
    Please do let me know if you think this has been helpful to you.

    Also if you have any questions over the application of this then do not hesitate to ask.
    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
    •