?
Solved

Adding Fade in using jquery?

Posted on 2010-01-11
6
Medium Priority
?
525 Views
Last Modified: 2012-06-27
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
Comment
Question by:askurat1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
6 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26290842
$(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
 
LVL 8

Author Comment

by:askurat1
ID: 26294295
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
 
LVL 1

Expert Comment

by:darianbr
ID: 26321250
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
 
LVL 1

Expert Comment

by:darianbr
ID: 26321252
Please post your solution here so other people are able to benefit.
0
 
LVL 8

Accepted Solution

by:
askurat1 earned 0 total points
ID: 26324073
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question