Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about the Effect methods.

Read through very carefully and make sure to ask questions where necessary.

animate( ) Method

The animate() method performs a custom animation of a set of CSS properties.

Syntax

The following below is the syntax to use this method -

selector.animate( params, [duration, easing, callback] );

Parameter Details

Below is the description of all the parameters -

params - A map of the CSS properties that the animation will move towards.

duration - This is an optional parameter representing how long the animation would run.

easing - This parameter is optional and it represents which easing function to use for the transition.

callback - This is an optional parameter which represents a function that is going to be called once the animation is set.

Example

Below is an example on how to use this method-

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#out" ).click( function( ) {
$( "#block" ).animate( {
width: "70%" ,
opacity: 0.4 ,
marginLeft: "0.6in" ,
fontSize: "3em" ,
borderWidth: "10px"
} , 1500 );
} );

$( "#in" ).click( function( ) {
$( "#block" ).animate( {
width: "100" ,
opacity: 1.0 ,
marginLeft: "0in" ,
fontSize: "80%" ,
borderWidth: "1px"
} , 1500 );
} );

} );
</script>

<style>
div { background-color: #666; width: 100px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "out">Animate Out</button>
<button Id = "in">Animate In</button>

<div id = "block">Hello</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

fadeIn( speed, [callback] ) Method

The fadeIn() method fades in all matched elements by adjusting their opacity and firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.fadeIn( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#in" ).click( function( ) {
$( ".target" ).fadeIn( 'slow', function( ) {
$( ".log" ).text( 'Fade In Transition Complete' );
} );
} );

$( "#out" ).click( function( ) {
$( ".target" ).fadeOut( 'slow', function( ) {
$( ".log" ).text( 'Fade Out Transition Complete' );
} );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "out">Fade Out</button>
<button id = "in">Fade In</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

<div class = "log"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

fadeOut( speed, [callback] ) Method

fadeOut() method fades out all the matched elements via adjusting their opacity to 0, and setting the display to "none" and then firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.fadeOut( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#in" ).click( function( ) {
$( ".target" ).fadeIn( 'slow', function( ) {
$( ".log" ).text( 'Fade In Transition Complete' );
} );
} );

$( "#out" ).click( function( ) {
$( ".target" ).fadeOut( 'slow', function( ) {
$( ".log" ).text( 'Fade Out Transition Complete' );
} );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "out">Fade Out</button>
<button id = "in">Fade In</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

<div class = "log"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

RECOMMENDED: JQuery AJAX Methods

fadeTo( speed, opacity, callback ) Method

fadeTo() jQuery method fades the opacity of all matched elements to a specified opacity and firing an optional callback after completion

Syntax

The following below is the syntax to use this method -

selector.fadeTo( speed, opacity[, callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

opacity - A number between 0 and 1, denoting the target opacity.

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#more" ).click( function( ) {
$( ".target" ).fadeTo( 'slow', 0.6, function( ) {
$( ".log" ).text( 'More Opacity Transition Complete' );
} );
} );

$( "#less" ).click( function( ) {
$( ".target" ).fadeTo( 'slow', 0.2, function( ) {
$( ".log" ).text( 'Less Opacity Transition Complete' );
} );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "less">Less Opacity</button>
<button id = "more">More Opacity</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

<div class = "log"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

hide( ) Method

hide( ) method hides each of the set of matched elements if they are shown. There is another form of this method which controls the speed of the animation.

Syntax

The following below is the syntax to use this method -

selector.hide( );

Parameter Details

Below is the description of all the parameters -

NA.

Example

Below is a short example on how to implement this method -

You can try the above code out to see the result for yourselves.

hide( speed, [callback] )

The hide( speed, [callback] ) hides all the matched elements using a graceful animation and firing an optional callback after completion.

Syntax

The following below is the syntax for a show( ) method -

selector.hide( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

You can try the above code out to see the result for yourselves.

show( ) Method

The show( ) method shows each of the set of matched elements if not shown. There is another form of this method which controls the speed of the animation.

Syntax

The following below is the syntax to use this method -

selector.show( );

Parameter Details

Below is the description of all the parameters -

NA.

Example

Below is a short example on how to implement this method -

You can try the above code out to see the result for yourselves.

show( speed, [callback] )

show( speed, [callback] ) shows all of the matched elements using a graceful animation and firing an optional callback after completion.

Syntax

The following below is the syntax for a show( ) method -

selector.show( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

You can try the above code out to see the result for yourselves.

slideDown( speed, [callback] ) Method

slideDown() method reveals all the matched elements by adjusting their height and firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.slideDown( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#down" ).click( function( ) {
$( ".target" ).slideDown( 'slow', function( ) {
$( ".log" ).text( 'Slide Down Transition Complete' );
} );
} );

$( "#up" ).click( function( ) {
$( ".target" ).slideUp( 'slow', function( ) {
$( ".log" ).text( 'Slide Up Transition Complete' );
} );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "up">Slide Up</button>
<button id = "down">Slide Down</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

<div class = "log"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

slideUp( speed, [callback] ) Method

The slideUp() method hides all the matched elements by adjusting their height and firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.slideUp( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#down" ).click( function( ) {
$( ".target" ).slideDown( 'slow', function( ) {
$( ".log" ).text( 'Slide Down Transition Complete' );
} );
} );

$( "#up" ).click( function( ) {
$( ".target" ).slideUp( 'slow', function( ) {
$( ".log" ).text( 'Slide Up Transition Complete' );
} );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "up">Slide Up</button>
<button id = "down">Slide Down</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

<div class = "log"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

slideToggle( speed, [callback] ) Method

slideToggle() method toggles the visibility of all matched elements by adjusting their height and also firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.slideToggle( speed, [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

You can try the above code out to see the result for yourselves.

stop( [clearQueue, gotoEnd] ) Method

The stop([clearQueue, gotoEnd]) method stops all currently running animations on all of the specified elements.

Syntax

The following below is the syntax to use this method -

selector.stop( [clearQueue, gotoEnd] );

Parameter Details

Below is the description of all the parameters -

clearQueue - An optional boolean parameter. when set to true clears the animation queue, it effectively stops all the queued animation

gotoEnd - This is an optional boolean parameter. Boolean (true/false) that when set to value true makes the playing animation to be immediately complete, including resetting original styles on show and hide and calling the callback function.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#go" ).click( function( ) {
$( ".target" ).animate( { left: '+=100px' }, 2000 );
} );

$( "#stop" ).click( function( ) {
$( ".target" ).stop( );
} );

$( "#back" ).click( function( ) {
$( ".target" ).animate( { left: '-=100px' }, 2000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { position: absolute; left: 40px; top: 250px; }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "go">GO</button>
<button id = "stop">STOP</button>
<button id = "back">BACK</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

toggle( ) Method

toggle() method in jQuery toggles displaying each of the set of the matched elements.

Syntax

The following below is the syntax to use this method -

selector.toggle( );

Parameter Details

Below is the description of all the parameters -

NA.

Example

Below is a short example on how to implement this method -

You can try the above code out to see the result for yourselves.

toggle( speed, [callback] ) Method

The toggle(speed, [callback]) Method toggles displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.

Syntax

The following below is the syntax to use this method -

selector.toggle( speed [callback] );

Parameter Details

Below is the description of all the parameters -

speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).

callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.

Example

Below is a short example on how to implement this method -

You can try the above code out to see the result for yourselves.

toggle( switch ) Method

toggle( switch ) method in jQuery toggles displaying each of the set of matched elements based on the passed parameter. If true, then the parameter shows all the elements, false hides all the elements.

Syntax

Below is the syntax to use this method -

selector.toggle( switch );

Parameter Details

Below is the description of all the parameters -

switch - A switch to toggle display on.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#false" ).click( function( ) {
$( ".target" ).toggle( false );
} );

$( "#true" ).click( function( ) {
$( ".target" ).toggle( true );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "false">False Switch</button>
<button id = "true">True Switch</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

jQuery.fx.off( ) Method

jQuery.fx.off( ) method globally disables all the animations.

Syntax

Below is the syntax to use this method -

jQuery.fix.off = [ true | false ];

Parameter Details

Below is the description of all the parameters -

Boolean - This should be set to either false to enable the animation or true in order to disable all the animations globally.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#enable" ).click( function( ) {
jQuery.fx.off = false;
} );

$( "#disable" ).click( function( ) {
jQuery.fx.off = true;
} );

$( "#go" ).click( function( ) {
$( ".target" ).animate( { left: '+=200px' }, 2000 );
} );

$( "#back" ).click( function( ) {
$( ".target" ).animate( { left: '-=200px' }, 2000 );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { position: absolute; left: 40px; top: 250px; }
</style>

</head>

<body>

<p>Click on any of the buttons below to see result:</p>

<button id = "enable">Enable</button>
<button id = "disable">Disable</button>
<button id = "go">GO</button>
<button id = "back">Back</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be discussing about the various jQuery UI Library Methods in details.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Understanding JQuery Effect Methods

animate( ) Method

Syntax

Parameter Details

Example

fadeIn( speed, [callback] ) Method

Syntax

Parameter Details

Example

fadeOut( speed, [callback] ) Method

Syntax

Parameter Details

Example

fadeTo( speed, opacity, callback ) Method

Syntax

Parameter Details

Example

hide( ) Method

Syntax

Parameter Details

Example

hide( speed, [callback] )

Syntax

Parameter Details

Example

show( ) Method

Syntax

Parameter Details

Example

show( speed, [callback] )

Syntax

Parameter Details

Example

slideDown( speed, [callback] ) Method

Syntax

Parameter Details

Example

slideUp( speed, [callback] ) Method

Syntax

Parameter Details

Example

slideToggle( speed, [callback] ) Method

Syntax

Parameter Details

Example

stop( [clearQueue, gotoEnd] ) Method

Syntax

Parameter Details

Example

toggle( ) Method

Syntax

Parameter Details

Example

toggle( speed, [callback] ) Method

Syntax

Parameter Details

Example

toggle( switch ) Method

Syntax

Parameter Details

Example

jQuery.fx.off( ) Method

Syntax

Parameter Details

Example

Post a Comment

Get new posts by email: