[jQuery] Sliding and Fading

The “hide()” and “show()” functions let you display/hide elements dynamically and even with animations. jQuery provides other functions to accomplish the show/hide tasks with animations.

  • slideDown() / slideUp() / slideToggle()
  • fadeIn() / fadeOut()

1. Sliding Up and Down

The sliding effect means an element becomes visible or hidden from either the top down or the bottom up.

  • slideDown( [duration], [callback] )
  • slideUp( [duration], [callback] )
  • slideToggle( [ duration ], [ callback ] )

The “slideDown()” function  displays the matched elements with a sliding motion. The “slideUp()” function hides the matched elements by making them slide up.  The “slideToggle()” function toggles the slide up and down effects.

You can provide the duration(‘slow’, ‘fast’, or in milliseconds) and the callback function to any of slide functions.

  • duration: 400ms by default. fast: 200ms, slow: 600ms
  • callback: the function is fired once the animation is complete
<div id="headerimg">
    <img src ="images/big.gif" alt="test img" />
</div>

<input type="button" id="sdBtn" value="Slide Down Header" />
<input type="button" id="suBtn" value="Slide Up  Header" />
<input type="button" id="toggleBtn" value="Slide Toggle Header" />
$(document).ready(function () {
    $('#sdBtn').click(function () {
        $('#headerimg').slideDown(2000, function () { alert('slideDown'); });
    });
    $('#suBtn').click(function () {
        $('#headerimg').slideUp(2000, function () { alert('slideUp'); });
    });
    $('#toggleBtn').click(function () {
        $('#headerimg').slideToggle(2000, function () { alert('slideToggle'); });
    });
});

2. Fading In and Out

The fading effect means an element fades out by becoming transparent or fades in by becoming opaque (less transparent).

  • fadeIn( [duration], [callback] )
  • fadeOut( [duration], [callback] )
  • fadeTo( duration, opacity, [ callback ] ) )

The “fadeIn()” and “fadeOut()” functions are similar to the “slideDown()” and “slideUp()”. The duration and a callback function can be used as arguments.

The “fadeTo()” function lets you specify the target opacity number between 0 and 1.

<div id="headerimg">
    <img src ="images/big.gif" alt="test img" />
</div>

<input type="button" id="foBtn" value="Fading Out Header" />
<input type="button" id="fiBtn" value="Fading In Header" />
<input type="button" id="pfBtn" value="Patial Fading Header" />
$(document).ready(function () {
    $('#foBtn').click(function () {
        $('#headerimg').fadeOut(2000, function () { alert('fadeOut'); });
    });
    $('#fiBtn').click(function () {
        $('#headerimg').fadeIn(2000, function () { alert('fadeIn'); });
    });
    $('#pfBtn').click(function () {
        $('#headerimg').fadeTo(2000, .55, function () { alert('fadeTo'); });
    });
});

3. Easing Effect

As of jQuery 1.4.3, an optional string argument ‘easing’ can be passed to a function. Esing functions specify the speed at different points within the animation. You can specify “swing” (default) or “linear“.  More easing functions are available with the use of plug-ins.

  • slideDown( [ duration ], [ easing ], [ callback ] )
  • slideUp( [ duration ], [ easing ], [ callback ] )
  • slideToggle( [ duration ], [ easing ], [ callback ] )
  • fadeIn( [ duration ], [ easing ], [ callback ] )
  • fadeOut( [ duration ], [ easing ], [ callback ] )
  • fadeTo( duration, opacity, [ easing ], [ callback ] )

4. The “fadeToggle” function

If you are keen enough to see the pattern of functions, you might be noticed one function is missing.

Yup!!! The “fadeToggle()” function is a recent addition to jQuery (as of 1.4.4).

  • fadeToggle( [ duration ], [ easing ], [ callback ] )
<div id="headerimg">
    <img src ="images/big.gif" alt="test img" />
</div>

<input type="button" id="ftBtn" value="Fade Toggle" />
$(document).ready(function () {
    $('#ftBtn').click(function () {
        $('#headerimg').fadeToggle(2000, 'swing', function () { alert('fadeToggle'); });
    });
});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s