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 4 of 4

Thread: jQuery Fade

  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts

    jQuery Fade

    Index.php
    Code:
    	
    <div id="fp_nav">
    <ul>
    	<a href="#"	id="fade2_link" class=""><li>Industrial Cleaning</li></a>
    	<a href="#" id="fade3_link" class=""><li>Agricultural</li></a>
    	<a href="#" id="fade4_link" class=""><li>Streets</li></a>
    	<a href="#" id="fade5_link" class=""><li>Marine</li></a>
    	<a href="#" id="fade6_link" class=""><li>Forestry</li></a>
    	<a href="#" id="fade7_link" class=""><li>Fire Brigade</li></a>
    </ul>
    </div>
    <div id="fader_img">
    	<img id='fade1' src="images/fader/1_1.jpg" alt="Fader"/>
    	<img id='fade2' src="images/fader/1_2.jpg" alt="Fader"/>
    	<img id='fade3' src="images/fader/1_3.jpg" alt="Fader"/>
    	<img id='fade4' src="images/fader/1_4.jpg" alt="Fader"/>
    	<img id='fade5' src="images/fader/1_5.jpg" alt="Fader"/>
    	<img id='fade6' src="images/fader/1_6.jpg" alt="Fader"/>
    	<img id='fade7' src="images/fader/1_7.jpg" alt="Fader"/>
    </div>
    Jquery Fader

    Code:
    $(document).ready(function() {
    
    	$('#fade2').hide();
    	$('#fade3').hide();
    	$('#fade4').hide();
    	$('#fade5').hide();
    	$('#fade6').hide();
    	$('#fade7').hide();
    
    //Default's
    var default_image = 0;
    
    //Hovers
    var i = 0;
    
    if (i == 0 && default_image != 1){
    	$('#fade2_link').hover(
    		function(){
    			$('#fade2').show();
    		},
    		function(){
    			$('#fade2').hide();
    		}
    	);
    }
    
    
    });

    Im really not sure what i could do here,
    I just wanted a simple fader, which does work if i hover over,
    although when i click them i just wanted it to stay that image and not change that image. So it changes the default displayed picture.

    Any help would be appreciated.
    Thanks

  • #2
    New Coder
    Join Date
    Apr 2008
    Posts
    36
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ps. i tried adding / removing the class selected on the images.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    need mroe info. please show an example of the html you are working with. Also how is the image changing do you have another function doing that onclick? Im not sure I understand

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh alos you can change this

    Code:
    	$('#fade2').hide();
    	$('#fade3').hide();
    	$('#fade4').hide();
    	$('#fade5').hide();
    	$('#fade6').hide();
    	$('#fade7').hide();
    to this:

    Code:
    $('elementtaghere[id^="fade"]').hide();
    elementtaghere I imagine in your case might be img or div, depending on what the fade elements


  •  

    Posting Permissions

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