Web Design & Development

jQuery: Fade Out, Change Content, Fade Back In

I’ve been searching for a jQuery function which when a user clicks on a piece of text, the text fades out, then the original text is replaced with a new piece of text, after that the new text is faded in, and couldn’t find one. So decided to make my own.

I have now updated the function, making it use ques rather than relying on the setTimeOut call. If you have any suggestions or questions about the function, dont hesitate to ask me.

I’ve hacked together a first draft. The only thing i am unhappy with at the moment, is that the function relies on a setTimeOut call. The reason this this line is included, is to remove the clicking functionality, it does this by changing the elements ID.

I have included a copy of function below, and an example of it in use.

The Function Version 2 (current)

<script type=“text/javascript“ charset=“utf-8“>
  $(document).ready(function() {
            $(‘#elementToFade‘).click(function(){
                // time in milliseconds
                // 500 = 1/2 a second, 1000 = 1 second etc…
                var timer = 500;
                // insert Analytics Code Here
                // tracker. . . . . . . . . . . . . . . . . .
              $(“#elementToFade“).animate({ opacity: 0}, timer );
              $(“#elementToFade“).queue(function () {
                    // if you dnt wan the text to chang color remove the
                    // ‘<span class=\”newContent\”>’ part and the ‘</span>’
                    // parts from the next line.
                    $(this).empty().append(“<span class=\”newContent\”>fade me in!</span>“);
                    $(this).dequeue();
                  });
              $(“#elementToFade“).animate({ opacity: 1}, timer );
              $(“#elementToFade“).queue(function () {
                    $(this).removeAttr(“id“);
                    $(this).dequeue();
                  });
            });
  });
</script>


The Function Version 1


<script type=“text/javascript“ charset=“utf-8“>
// when document is ready load this function
$(document).ready(function() {
    // when someone clicks on the element with id of elementToFade
    $(‘#elementToFade‘).click(function() {
        // Fade Out Text, then remove text & insert ’slide 2′, now fade back the text in.
        $(“#elementToFade“).fadeOut(“fast“, function(){$(“#elementToFade“).empty().append(“slide 2“).fadeIn(‘slow‘)});
        // change the span’s Id to noId, making it unclickable, bit of a hack  not really that ideal
        var t = setTimeout(“document.getElementById(’elementToFade’).id = ‘noId’;“, 500);
    });
});
</script>



Example of the Function in Use


An example of the function in use can be found here (v1) & here (v2). In the example there is a telephone number, but the user has to click the text to see the telephone number. I recommend you view the source code to see how it works.


			

			
Tags: , , , , , , , , 

			

				This entry was posted
								on Tuesday, July 15th, 2008 at 1:46 am				and is filed under Web Development.
				You can follow any responses to this entry through the RSS 2.0 feed.

									You can leave a response, or trackback from your own site.

							


	


	
9 Responses to “jQuery: Fade Out, Change Content, Fade Back In”


	
    

	
		
  1. 
			
    
			 Bookmarks about Labs Says:
						
    […] - bookmarked by 2 members originally found by rocha8495 on 2008-07-27  jQuery Function : Fade Out, Change Content, Fade Back In  http://www.jhlabs.co.uk/2008/07/jquery-function-fade-out-change-content-fade-back-in/ - bookmarked […]
    
			
    August 19th, 2008 at 6:16 pm 
    
			
    
		
    2. 

	
	
		
  2. 
			
    
			 Adam Says:
						
    Hi, 
    

    I’ve got this working, after a day searching for how to do this which led me from spry to jquery i was glad to find your page. Now I’d like to know how to make a third text section, so that when i click on the second section of that fades out leavig a third. Can you pint me in the right direction? I’d really appreciated it. 
    

    Adam
    
			
    February 3rd, 2009 at 12:21 am 
    
			
    
		
    3. 

	
	
		
  3. 
			
    
			 admin Says:
						
    Here is a quick example. You must note that these examples are not SEO friendly or accessible, they were made specifically to hide details from search engines.
    

    A working copy of the code can be found here
    

    Rather than changing the text dynamically in the javascript, i would recommend you instead show/hide divs dynamically. So rather than using the append() function you instead use the. show() function.
    

    Hoped that helped in some way.
    

    Jon
    
			
    February 3rd, 2009 at 5:55 pm 
    
			
    
		
    4. 

	
	
		
  4. 
			
		
    5. 

	
	
		
  5. 
			
    
			 jh labs » Blog Archive » jQuery Slide Show Fading Content by Clicks Says:
						
    […] I wrote a script which would allow a user to click a piece of text, and it would fadeout the content and fade in a […]
    
			
    March 19th, 2009 at 7:46 pm 
    
			
    
		
    6. 

	
	
		
  6. 
			
    
			 Scott Says:
						
    Hey, any reason to not use callback for what you are trying to above?
    

    Example:
    

    $(”div”).fadeOut(1000, function () {
    
   //do what you want to do here then fade back in
    
   $(”html”).fadeIn(1000);
    
});
    
			
    March 20th, 2009 at 3:57 am 
    
			
    
		
    7. 

	
	
		
  7. 
			
    
			 my so-called blog » links for 2009-05-13 Says:
						
    […] jh labs » Blog Archive » jQuery: Fade Out, Change Content, Fade Back In a jQuery function which when a user clicks on a piece of text, the text fades out, then the original text is replaced with a new piece of text, after that the new text is faded in (tags: jquery javascript webdev) […]
    
			
    May 14th, 2009 at 3:01 am 
    
			
    
		
    8. 

	
	
		
  8. 
			
    
			 Kalessin Says:
						
    Thanks for that, it’s the effect I was looking for… now I just need to find out how to modify the functionality :) 
    

    What I would like to do — to make it accessible — is to retrieve the content from several p tags and iterate through them on a timer. Your code is an excellent start, thank you! Can you help with the rest?
    

    Thanks again.
    
			
    August 20th, 2009 at 5:56 pm 
    
			
    
		
    9. 

	
	
		
  9. 
			
    
			 admin Says:
						
    William,
    

    You might want to look at http://www.jhlabs.co.uk/2009/03/jquery-slide-show-fading-content-by-clicks/ and all you should have to do is change the click functionality to an if statement, regarding to if the timer has reached its ideal time, then display the next div, or in your case p tag.
    

    Hope this helps,
    

    Jon
    
			
    November 2nd, 2009 at 4:39 am 
    
			
    
		
    10. 

	
	
	


 



Leave a Reply