Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 532
  • Last Modified:

Adding Fade in using jquery?

I just want to simply fade in my content when I go to each section on the page using jquery.
For example when I go to my site and click the about button the about contents fade in and when I hit the contact button the contact contents fade in and so on. I have included my files below.

Thanks,
Tony
index.html
main.css
main.js
0
askurat1
Asked:
askurat1
  • 2
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
$(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });


check this link
http://docs.jquery.com/Effects/fadeIn

You can also check these links
http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm
http://www.visual-blast.com/javascript/fade-inout-with-jquery/
0
 
askurat1Author Commented:
Well I have found all of these through google but none seem to help. I want something a little more specific to my needs. Just something to get me started.
0
 
darianbrCommented:
Try this, it is untested but the theory should work.
<a href='/aboutus.php' id='loadpage'>About us</a>
<a href='/contactus.php' id='loadpage'>Contact us</a>

<div id='pageContent'>Page will load in here</div>

<script type='text/javascript'>

$('#loadpage').click(function() {

     $('#pageContent').hide.load(this.href, 0, function() { $('#pageContent').fadeIn(1000); });

});

Open in new window

0
 
darianbrCommented:
Please post your solution here so other people are able to benefit.
0
 
askurat1Author Commented:
Solution:

$("#mainNav li a").click( function(){
        $(this).siblings().removeClass("active");  //  Unset all other buttons
        $(this).addClass("active");
		$(".section").fadeOut('fast');   
		
		// Now figure out what the 'href' attribute value is and find the element with that id.  	
		// Then show it.   
		var content_show = $(this).attr("href");   
		$(content_show).fadeIn(500);
		
		// do not perform default action. i.e. do not append #content_id to URL
		return false;         
    });

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now