TechieDrill » fade in http://techiedrill.com Your World Of Technical Tutorials Tue, 10 Aug 2010 20:39:11 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 jQuery Fade In, Fade Out http://techiedrill.com/2009/11/jquery-fade-in-fade-out/ http://techiedrill.com/2009/11/jquery-fade-in-fade-out/#comments Wed, 04 Nov 2009 17:59:41 +0000 bprashanth http://techiedrill.com/?p=26

To download this youtube video, Click Here

Text Content:

This is a simple tutorial on fadein and fadeout functionalities in jQuery.

An extra piece of information: A Dreamweaver API extension for jQuery.
When typing in a javascript file, the code-ins in this extension are quite handy. They show up pop-ups of scroll-down lists of functions available to use, so that we need not keep all the available jQuery functions in our head.
The extension can be obtained here: http://xtnd.us/dreamweaver/jquery
There is even a small video tutorial on how the extension speeds-up jQuery coding in Dreamweaver.

There are three files associated in this tutorial: HTML file, CSS file and the javascript function file.

The following links are added to the blank HTML page:

  1. The jQuery source link — <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.6.js”></script>
  2. The CSS file link — <link href=”css/style3.css” rel=”stylesheet” type=”text/css” />
  3. The javascript function file — <script src=”js/fucntion3.js” type=”text/javascript”></script>

Note: It is important that your javascript function file tag comes after your jquery source link.

The content of the CSS:

#content
{
 height:200px;
 width:200px;
 background-color:#FF9933;
}

The HTML content:

<body>
 <div id="content"></div>
 <a href="#" id="fadeout">Fade Out</a>
 <a href="#" id="fadein">Fade In</a>
</body>

Now, the javascript function file is written as given below:

$(function() {
 $("a#fadeout").click(function() {
 $("#content").fadeOut(1000);
 });
 $("a#fadein").click(function() {
 $("#content").fadeIn(1000);
 });
});

Here, we just get the <a> tag with id “fadeout” and assign its click function to fadeout the element with id “content” over a period of one second (1000 miliseconds).
Similarly, the fadein function is also coded.

]]> http://techiedrill.com/2009/11/jquery-fade-in-fade-out/feed/ 0