JQuery animate() & delay() Methods – Tutorial

Hello guys, welcome again to wearewriter.com. Today we will be going to discuss JQUERY ANIMATE EFFECT and DELAY EFFECT. In previous articles we have discussed about the  JQUERY SLIDE EFFECTS you can read out the article.

Here we will learn about jquery animate & delay effects by me jquery tutorial and you can also visit the official website of jquery.com.

jQuery Animate() Effect

The jQuery animate() effect method provides you a way to create custom animations.

SYNTAX-

$(selector).animate({params}, speed, callback); 

Params– parameter defines the CSS properties to be animated.

Speed– It is optional and specifies the duration of the effect but you can set the effect duration like “slow” ,”fast”,”milliseconds”.

Callback -It is also optional but it is a function which execute after the execution.

EXAMPLE

OUTPUT

jQuery delay() effect

here we will discuss the delay method As you would have understood by the word of delay() which means when you apply this delay() method the animation will start delay it will take few seconds. in other words The jQuery delay () method sets a timer to delay the execution of the next item in the queue.

SYNTAX-

$(selector).delay (speed, queueName)   

Here the speed parameter and this is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds. The next one is queueName, It is also an optional parameter. It specifies the name of the queue. 

EXAMPLE-

<!DOCTYPE html>    
<html>    
<head>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script>    
$(document).ready(function(){    
  $("button").click(function(){    
    $("#div1").delay("slow").fadeIn();    
});    
});    
</script>    
</head>    
<body> 
<h1 style="text-align: center;">jquery Basics by wearewriter.com</h1>   
<button>Click me</button><br>  
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>    
</body>    
</html>    

OUTPUT

I hope you like my article if you have any query so connect with wearewriter.com and ask your question regarding this tutorial in comment section.

Thank you guys for read my article.

Leave a Comment

Show Buttons
Hide Buttons