Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Advanced JQuery Fading Effects
Posted By Sarin on Mar 30, 2012     RSS Feeds     Latest Hinduism news
2953 Views

Fadin Effects Fading Elements with JQuery
The fade effect is when an element fades out by becoming increasingly transparent over time until it disappears or fades in by becoming decreasingly opaque over time until it become completely visible. JQuery also allows you to partially fade an element, making it semitransparent.
Fading in
To make an element fade in, it should be hidden first. this can be done by Setting the style attribute of the element to display=none.
To follow along with these exercises, you need an image in the images directory that you are using to test your code. Name this image big.gif.

To make an element appear to fade in, follow these steps:
1. Create a Web page containing the following code:
<html>
<head>
    <title>My Test Page</title>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function ()  {
           
        });
    </script>
</head>
<body>
    <div style="display: none">
        <img src="kis.jpg" /></div>
    <input value="Fade In" type="submit">
</body>
</html>
This code contains a button and an image inside a hidden <div> element.
  
2. Save the file, and then view it in your browser.
The image doesn’t appear  

3. Add the following JQuery function for fadein effect
  $(':submit').click(function ()  {
                $('div').fadeIn();
            });
The code says, when the button is clicked, everything in the <div> should fade in.
4. Save this file, and then view it in your browser. Click the button again.
  
The image in the hidden <div> element fades in


  
5. Setting the speed of the fade-in effect
  
$('div').fadeIn("fast");
  
With any jQuery effect, we can use one of three speeds: slow, normal, and fast. Using . fadeIn ('slow') would make the fadeIn effect complete in .6 seconds, . fadeIn ('normal') in .4 seconds, and . fadeIn ('fast') in .2 seconds.
Now when you save and reload this file in your browser and click the button, the fade in effect occurs more quickly.

Fading out
The fade out effect takes a visible element and hides it by making it appear to fade out.
To make an element disappear on a page using the fade out effect, follow these steps:
6. Add the code for the fadeout effect as follows:
  
       $(':submit').click(function ()  {
                $('div').fadeOut();
            });
  
The code says, when the button is clicked, everything in the <div> should fade out.

7. Save this file, and then reload it in your browser. Click the button.
The image in the <div> element fades out  
Partial fading
JQuery also allows an element to fade partially and become partially transparent. The function syntax is:  
fadeTo(speed, percent, [callback]);
  
The percent is expressed as a decimal and is used to control how much to fade out the element. For example, if you want to make something fade out 25 percent, you use .25 to denote 25 percent
  
8. Add the following jquery code for faedto effect
  
    $('#FadeTo').click(function ()  {
                $('div').fadeTo('slow', .25);
            });

The code says, “When the button with id ‘FadeTo’ is clicked, everything in the <div> element should be faded out 25 percent.”

9. Save this file, and then view it in your browser. Click the button.
The image in the <div> element appears to 25 percent transparent.
  
  
So, in this demo, we have seen different fading functions of jquery
10. We can also have callback function to the Fadein, Fadeout or FadeTo events.
Callback functions are functions which will be executed when the events have completed.
For Ex: we can have a callback function to alert the user that hiding event is completed.
  
   $('#FadeTo').click(function ()  {
                $('div').fadeTo('slow', .25, function ()  {alert('Div Element is faded to 25 Percent'); });
            });

So, three different effects functions be summarized as follows:
Function   Parameter Return Value Description
fadeOut (speed, callback) speed (Number|String) Specifies the duration of the effect as a number of milliseconds or as one of the predefined strings: slow, normal, or fast. If omitted, the default is normal. callback  (Function) An optional function invoked when the animation completes. No parameters are passed to this function, but the function context (this) is set to the element that was animated. wrapped set Causes any matched elements that aren’t hidden to be removed from the display by gradually Changing their opacity to 0% and then removing the element from the display. The duration Of the change in opacity is determined by the speed parameter. Any elements that are Already hidden aren’t affected.  
fadeIn (speed, callback) Same as above wrapped set Causes any matched elements that are hidden to be shown by gradually changing their opacity To their natural value. This value is either the opacity originally applied to the element, or 100%. The duration of the change in opacity is determined by the speed parameter. Any elements That aren’t hidden aren’t affected.  
fadeTo (speed, callback) Same as above Wrapped set.Adjusts the opacity of the wrapped elements from their current setting to the new setting Specified by opacity.  

here
Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Manipulating Elements and Animations Using Jquery
Creating your first application in JQuery
Get Set Value of any HTML element using jquery-Val function
JQuery FAQ and Jquery Effects
Advanced JQuery Fading Effects
Select Parent, Child, sibling,descendants HTML element using jquery
Show Update Progress Animation-Ajax
Appending Html elements or contents dynamically
Working with forms-Jquery form selector
Jquery features, Advantages and disadvantages

Post Comment