Scribd
Upload
0 views

17 JQuery Effects

The document provides an overview of jQuery effects, including methods for hiding, showing, fading, and sliding elements. It details specific functions like hide(), show(), fadeIn(), fadeOut(), slideDown(), and animate(), along with their syntax and examples. Additionally, it explains how to customize speed and use parameters for animations, as well as the queue functionality for managing multiple animations.

Uploaded by

khetrabasipanda32
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

17 JQuery Effects

The document provides an overview of jQuery effects, including methods for hiding, showing, fading, and sliding elements. It details specific functions like hide(), show(), fadeIn(), fadeOut(), slideDown(), and animate(), along with their syntax and examples. Additionally, it explains how to customize speed and use parameters for animations, as well as the queue functionality for managing multiple animations.

Uploaded by

khetrabasipanda32
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

jQuery Effects

jQuery hide( ) and show( )


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

$("#show").click(function(){
$("p").show();
});
We can increase or decrease speed of
hide or show
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle( )
You can also toggle between hiding
and showing an element with
the toggle() method.
Shown elements are hidden and
hidden elements are shown:
$("button").click(function(){
$("p").toggle();
});
We can change speed of toggle
using a parameter.
jQuery fading methods
With jQuery you can fade an element
in and out of visibility.
jQuery has the following fade
methods:

 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()
fadeIn( ) method
The jQuery fadeIn() method is used
to fade in a hidden element.
Syntax: $
(selector).fadeIn(speed,callback);
fadeIn( ) with different parameters:
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut( ) method
The jQuery fadeOut() method is
used to fade out a visible element.
Syntax:$
(selector).fadeOut(speed,callback);

$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeToggle( ) method
The jQuery fadeToggle() method
toggles between
the fadeIn() and fadeOut() method
s.
If the elements are faded
out, fadeToggle() will fade them in.
If the elements are faded
in, fadeToggle() will fade them out.
Syntax: $
(selector).fadeToggle(speed,callbac
fadeToggle( ) method
fadeToggle( ) method with different
parameters.

$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
fadeTo( ) method
The jQuery fadeTo() method allows fading
to a given opacity (value between 0 and
1).
Syntax: $
(selector).fadeTo(speed,opacity,callback);
Example:
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
jQuery Sliding Methods
With jQuery you can create a sliding
effect on elements.
jQuery has the following slide
methods:

 slideDown()
 slideUp()
 slideToggle()
The slideDown( ) method
The jQuery slideDown() method is
used to slide down an element.
Syntax: $
(selector).slideDown(speed,callbac
k);

$("#flip").click(function(){
$("#panel").slideDown();
});
The slideUp( ) method
The jQuery slideUp() method is
used to slide up an element.
Syntax: $
(selector).slideUp(speed,callback);

Example: $("#flip").click(function()
{
$("#panel").slideUp();
});
The slideToggle( ) method
The jQuery slideToggle() method toggles
between
the slideDown() and slideUp() methods.
If the elements have been slide
down, slideToggle() will slide them up.
If the elements have been slide
up, slideToggle() will slide them down.
Syntax: $
(selector).slideToggle(speed,callback);
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery Animation
The jQuery animate() method is
used to create custom animations.
Syntax: $
(selector).animate({params},spee
d,callback);
The required params parameter
defines the CSS properties to be
animated.
Example: $
("button").click(function(){
jQuery Animation
Multiple properties can be animated
at the same time:
Example:
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
jQuery animate() - Using Relative
Values
It is also possible to define relative
values (the value is then relative to the
element's current value). This is done
by putting += or -= in front of the
value:
Example:
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Using Pre-
defined Values
You can even specify a property's
animation value as "show", "hide",
or "toggle":
Example:
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Uses Queue
Functionality
By default, jQuery comes with queue functionality for
animations.
This means that if you write multiple animate() calls
after each other, jQuery creates an "internal" queue
with these method calls. Then it runs the animate
calls ONE by ONE.
$("button").click(function(){
var div = $("div");
div.animate({height: '300px',
opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px',
opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
THANK YOU

You might also like