jQuery Effects

  • Previous Page
  • Next Page

jQuery can create effects such as hiding, showing, toggling, sliding, and custom animations.

Try It Yourself

Please try this jQuery effect:

CodeW3C.com - The Leading Web Technology Tutorial Site

At CodeW3C.com, you can find all the website construction tutorials you need.

Please click here

Example

jQuery hide()
Demonstrate the simple jQuery hide() function.
jQuery hide()
Another hide() demonstration. How to hide part of the text.
jQuery slideToggle()
Demonstrate the simple slide panel effect.
jQuery fadeTo()
Demonstrate the simple jQuery fadeTo() function.
jQuery animate()
Demonstrate the simple jQuery animate() function.

jQuery Hide and Show

Through the hide() and show() functions, jQuery supports hiding and displaying HTML elements:

Example

$("#hide").click(function() {
$("p").hide();
});
$("#show").click(function() {
$("p").show();
});

Try It Yourself

Both hide() and show() can set two optional parameters: speed and callback.

Syntax:

$.animate({scrollTop: target}, speed, callback)
$.animate({scrollTop: target}, speed, callback)

speed The parameter specifies the speed of the display or hide. These values can be set: "slow", "fast", "normal", or milliseconds.

callback The parameter is the name of the function to be executed after the hide or show function is completed. You will learn more about it in the following chapters of this tutorial. callback Understanding the parameters.

Example

$("button").click(function(){
$("p").hide(1000);
});

Try It Yourself

jQuery Toggle

The jQuery toggle() function uses the show() or hide() functions to switch the visibility state of HTML elements.

Toggle the visibility of elements that are shown and hidden.

Syntax:

$.animate({scrollTop: target}, speed, callback)

speed The parameter can be set to these values: "slow", "fast", "normal", or milliseconds.

Example

$("button").click(function(){
$("p").toggle();
});

Try It Yourself

callback This parameter is the name of the function to be executed after the completion of this function. You will learn more about it in the following chapters of this tutorial. callback Understanding the parameters.

jQuery animation functions - animate, slideDown, slideUp, slideToggle

jQuery has the following animation functions:

$.animate({scrollTop: target}, speed, callback)
$.animate({scrollTop: target}, speed, callback)
$(selector).slideToggle(speed,callback)

speed The parameter can be set to these values: "slow", "fast", "normal", or milliseconds.

callback This parameter is the name of the function to be executed after the completion of this function. You will learn more about it in the following chapters of this tutorial. callback Understanding the parameters.

slideDown() example

$(".flip").click(function(){
$(".panel").slideDown();
});

Try It Yourself

slideUp() example

$(".flip").click(function(){
$(".panel").slideUp();
});

Try It Yourself

slideToggle() example

$(".flip").click(function(){
$(".panel").slideToggle();
});

Try It Yourself

jQuery Fade Functions - fadeIn(), fadeOut(), fadeTo()

jQuery has the following fade functions:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed The parameter can be set to these values: "slow", "fast", "normal", or milliseconds.

In the fadeTo() function, opacity This parameter specifies the opacity to which the element is faded.

callback This parameter is the name of the function to be executed after the completion of this function. You will learn more about it in the following chapters of this tutorial. callback Understanding the parameters.

fadeTo() example

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Try It Yourself

fadeOut() example

$("button").click(function(){
$("div").fadeOut(4000);
});

Try It Yourself

jQuery Custom Animation

The syntax for creating custom animations with jQuery functions:

$(selector).animate({params},[duration],[easing],[callback])

The key parameter is paramsIt defines the CSS properties that produce the animation. Multiple such properties can be set at the same time:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

The second parameter is durationIt defines the time applied to the animation. The values it sets are: "slow", "fast", "normal", or milliseconds.

Example 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Try It Yourself

Example 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Try It Yourself

HTML elements are by default statically positioned and cannot be moved.

To make an element movable, set the CSS position to relative or absolute.

jQuery Effects - From This Page

Function Description
$(selector).hide() Hide the selected element
$(selector).show() Show the selected element
$(selector).toggle() Toggle (between hide and show) the selected element
$(selector).slideDown() Slide down (show) the selected element
$(selector).slideUp() Slide up (hide) the selected element
$(selector).slideToggle() Toggle slide up and slide down for the selected element
$(selector).fadeIn() Fade in the selected element
$(selector).fadeOut() Fade out the selected element
$(selector).fadeTo() Fade out the selected element to the given opacity
$(selector).animate() Perform custom animations on selected elements

For the complete reference manual, please visit our jQuery Effect Reference Manual.

  • Previous Page
  • Next Page