2 Replies - 679 Views - Last Post: 11 February 2013 - 06:01 PM

#1 Exceedinglife  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 01-July 12

Fade out then fadeIn

Posted 11 February 2013 - 05:47 PM

Hello i am trying to get my code to fade out then back in after the animation. Right now it does the animation then does the fading but i need it to happen during the animation to.

$(document).ready(function() {
	
	// runs when an h2 heading is clicked
	$("#faqs h2").toggle(
		function() {
			$(this).toggleClass("minus");
		    $(this).next().show(2000);
	    },
	    function() {
	        $(this).toggleClass("minus");
	        $(this).next().hide(2000);
	    }
    ); // end toggle
    
    // runs when the page is ready
    $("#faqs h1").animate( { fontSize: "650%", opacity: 1, left: "+=375" }, 1000 )  
		         .animate( { fontSize: "175%", left: "-=200" }, 1000 );
		    
	// runs when the top-level heading is clicked
	$("#faqs h1").click(function() {
		$(this).animate( { fontSize: "650%", opacity: 1, left: "+=375" }, 2000 )  
			   .animate( { fontSize: "175%", left: "-=200" }, 1000 );
			   function() {
			   		$("#faqs h1").fadeOut(2000).fadeIn(1000);
			   }
			  
	}); // end click
    
    $("#faqs").click(function() {
    	$(this).fadeOut(2000).fadeIn(1000);
    })
}); // end ready


HTML
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>FAQs</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" href="main.css">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   	<script src="faqs.js"></script>   	
</head>

<body>
	<section id="faqs">
		<h1>jQuery FAQs</h1>
		<h2>What is jQuery?</h2>
		<div>
			<p>jQuery is a library of the Javascript functions that you're most likely 
			   to need as you develop web sites.
			</p>
		</div>
		<h2>Why is jQuery becoming so popular?</h2>
		<div>
			<p>Three reasons:</p>
			<ul>
				<li>It's free.</li>
				<li>It lets you get more done in less time.</li>
				<li>All of its functions are cross-browser compatible.</li>
			</ul>
		</div>
		<h2>Which is harder to learn: jQuery or Javascript?</h2>
		<div>
			<p>For most functions, jQuery is significantly easier to learn 
			    and use than Javascript. But remember that jQuery is Javascript.
			</p>
		</div>
		<br><br>
		<p><a href="http://jqueryui.com/effect/#easing" target="_blank">Review jQuery UI easings in a new window or tab</a></p>
	</section>
</body>
</html>


CSS
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	border: 3px solid blue;
}
section {
	padding: 15px 25px;
}
#faqs h1 { 
	position: relative;
	left: -175px;
	font-size: 75%;
	opacity: .2;
	color: blue;
}
h2 {
	font-size: 120%;
	padding: .25em 0 .25em 25px;
	cursor: pointer;
	background: url(images/plus.png) no-repeat left center;
}
h2.minus {
	background: url(images/minus.png) no-repeat left center;
}
div {
	display: none;
}
div.open {
	display: block;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .25em;
}
p {
	padding-bottom: .25em;
	padding-left: 25px;
}



Is This A Good Question/Topic? 0
  • +

Replies To: Fade out then fadeIn

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,358
  • Joined: 12-December 12

Re: Fade out then fadeIn

Posted 11 February 2013 - 05:58 PM

You have several affects in your code, which particular one are you referring to?

What should happen and in what order?

You have an error in your code; should be:

	// runs when the top-level heading is clicked
	$("#faqs h1").click(function() {
		$(this).animate( { fontSize: "650%", opacity: 1, left: "+=375" }, 2000 )  
			   .animate( { fontSize: "175%", left: "-=200" }, 1000 ),
			   function() {
			   		$("#faqs h1").fadeOut(2000).fadeIn(1000);
			   }
			  
	}); // end click

This post has been edited by andrewsw: 11 February 2013 - 05:58 PM

Was This Post Helpful? 0
  • +
  • -

#3 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4332
  • View blog
  • Posts: 12,127
  • Joined: 18-April 07

Re: Fade out then fadeIn

Posted 11 February 2013 - 06:01 PM

Then adjust the opacity as one of the properties in the animation. So as you run the animation, you want the opacity to go down to zero during the animation. Then the chained animation will fade in as it also adjusts other attributes.

$("#faqs h1").animate( { fontSize: "650%", opacity: 0, left: "+=375" }, 1000 ).animate( { fontSize: "175%", opacity: 1, left: "-=200" }, 1000 );



Here when the animation starts it will also fade out as it moves left and font size changes. Then it will go into the other animation where it will reduce the font size as it also fades in.

Hope this is what you were looking to do. :)

This post has been edited by Martyr2: 11 February 2013 - 06:03 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1