To Runs a customized animation to the selected elements

This animate() method switch an element from one particular form to another with CSS styles elements. The CSS property value is switched progressively, to create an animated effect.

In animate() method, only numeric values can be performed (like "margin:30px"). String values cannot be performed (like "background-color:red").

Important Note: Only Use "+=" or "-=" on relative animations for selected elements.

For Example

//HTML Elements
<input type="button" value="Start Animation" class="startAnimBtn" />
<div id="box"> Test Content here </div>


//Jquery Animate() Effects Function                            
$(".startAnimBtn").click(function(){
    $("#box").animate({height: 300}, 1500);
    $("#box").animate({width: 300}, 1500);
});

The clearQueue() method helps to remove or dismiss all the remaining elements from the queue that have not been run yet.

Important Note: clearQueue() is much different from the stop() and finish() method(as stop() and finish() method only works with animation) whereas clearQueue() can remove any type of queued functions.

Below is the simple example to remove all the remaining functions queued from the elements selected-

For Example

//HTML Elements
<input type="button" value="Start Animation" class="startBtn" />
<input type="button" value="Stop Animation" class="stopBtn" />
<div id="box"> Test Content here </div>


//Jquery clearQueue() Effects Function
$(".startAnimBtn").click(function(){
    $("#box").animate({height: 300}, 1500);
    $("#box").animate({width: 300}, 1500);
});                       
$(".stopAnimBtn").click(function(){
    $("#box").clearQueue();
});

Delay() method helps us to set a specific interval of delay effect to other jquery methods for all queued functions on the selected elements

Delay() method helps to set a sequential interval of any effect. This method works with all other jquery method (such as- fadeIn, fadeOut, show etc.)

For Example

//HTML Elements
<input type="button" value="Delay Effect" class="clickDelayBtn" />
<div id="box"> Test Content here </div>
<div id="box01"> Test Content here </div>
<div id="box02"> Test Content here </div>

//Jquery Delay() Effects Function                            
$(".clickDelayBtn").click(function(){
    $("#box").delay("slow").fadeIn();
    $("#box 01").delay(1000).fadeIn();
    $("#box 02").delay(1400).fadeIn();
});

FadeIn() method allow to create a fade effect to show any specific elements.

FadeIn() method helps to achieve an elegant fade effect while showing any content or elements through providing fading value range.

For Example

//HTML Elements
<input type="button" value="Fade In" class="fadeInBtn" />
<input type="button" value="Fade Out" class="fadeOutBtn" />
<div id="box"> Test Content here </div>

//Jquery fadeIn() Effects Function                            
$(".fadeOutBtn").click(function(){
    $("#box").fadeOut(700)
});
$(".fadeInBtn").click(function(){
    $("#box").fadeIn(700);
});

FadeOut() method is allowed to create a fade effect to hide any specific elements.

FadeOut() method helps to achieve an elegant fade effect while hiding any content or elements through providing fading value range.

For Example

//HTML Elements
<input type="button" value="Fade In" class="fadeInBtn" />
<input type="button" value="Fade Out" class="fadeOutBtn" />
<div id="box"> Test Content here </div>

//Jquery fadeOut() Effects Function                            
$(".fadeOutBtn").click(function(){
    $("#box").fadeOut()
});
$(".fadeInBtn").click(function(){
    $("#box").fadeIn();
});

FadeToggle() method works between fadeIn() and fadeOut method. Gradually FadeToggle() allows reversible effect while the element have fadeIn() or fadeOut() mode.

For Example

//HTML Elements
<input type="button" value="FadeToggle" class="fadeToggleBtn" />
<div id="box"> Test Content here </div>
<div id="box01"> Test Content here </div>
<div id="box02"> Test Content here </div>

//Jquery FadeToggle Effects Function                            
$(".fadeToggleBtn").click(function(){
    $("#box").fadeToggle(700);;
    $("#box 01").fadeToggle(1000);;
    $("#box 02").fadeToggle(1500);;
});

The finish() method allow to stop, remove and complete the running animation and all queued animation for the selected element.

For Example

//HTML Elements
<input type="button" value="Start Animation" class="startBtn" />
<input type="button" value="Finish Animation" class="finishBtn" />
<div id="box"> Test Content here </div>

//Jquery Finish Effects Function                            
 $(".startBtn").click(function(){
    $(".box").animate({height: 300}, 3000);
    $(".box").animate({width: 300}, 3000);
});
$(".finishBtn").click(function(){
    $(".box").finish();
});

The Hide() method helps to build hidden effect to selected element. Hide() method is mostly similar to CSS 'display:none' property.

For Example

//HTML Elements
<input type="button" value="Show" class="showBtn" />
<input type="button" value="Hide" class="hideBtn" />
<div id="box"> Test Content here </div>

//Jquery Hide Effects Function                            
 $(".showBtn").click(function(){
    $(".box").show(400);
});
$(".hideBtn").click(function(){
    $(".box").hide(400);
});

The show() method helps to create visible effect to selected element. show() method is mostly similar to CSS 'display:block' property.

For Example

//HTML Elements
<input type="button" value="Show" class="showBtn" />
<input type="button" value="Hide" class="hideBtn" />
<div id="box"> Test Content here </div>

//Jquery Show Effects Function                            
 $(".showBtn").click(function(){
    $(".box").show(400);
});
$(".hideBtn").click(function(){
    $(".box").hide(400);
});

The slideDown() method is similar to show() method. It is implemented to show the selected hidden content or element. SlideDown() method is only worked in 'display:none' css property, it can't work for 'visibility:hidden' css property.

For Example

//HTML Elements
<input type="button" value="Slide UP" class="slideUpBtn" />
<input type="button" value="Slide Down" class="slideDownBtn" />
<div id="box"> Test Content here </div>

//Jquery Slide Down Effects Function                            
$(".slideUpBtn").click(function(){
    $(".box").slideUp(500);
});
$(".slideDownBtn").click(function(){
    $(".box").slideDown(500);
});

The slideUp() method is similar to hide() method. It is implemented to hide the selected visible content or element. SlideUp() method is only worked in 'display:block' css property, it can't work for 'visibility:visible' css property

For Example

//HTML Elements
<input type="button" value="Slide UP" class="slideUpBtn" />
<input type="button" value="Slide Down" class="slideDownBtn" />
<div id="box"> Test Content here </div>

//Jquery SlideUp Effects Function                            
$(".slideUpBtn").click(function(){
    $(".box").slideUp(500);
});
$(".slideDownBtn").click(function(){
    $(".box").slideDown(500);
});

slideToggle() method works between slideUp() and slideDown() method. Gradually slideToggle() allows reversable effect while the element have slideDown() or slideUp() mode.

For Example

//HTML Elements
<input type="button" value="SlideToggle" class="slideToggleBtn" />
<div id="box"> Test Content here </div>
<div id="box01"> Test Content here </div>
<div id="box02"> Test Content here </div>

//Jquery SlideToggle Effects Function                            
$(".slideToggleBtn").click(function(){
    $("#box").slideToggle(700);;
    $("#box 01").slideToggle(1000);;
    $("#box 02").slideToggle(1500);;
});

Stop() method implement to end or close the event for selected element. Unlike finish() method, stop method only perform for stopping or ending the animation.

For Example

//HTML Elements
<input type="button" value="Start Animation" class="startBtn" />
<input type="button" value="Finish Animation" class="stopBtn" />
<div id="box"> Test Content here </div>

//Jquery "Stop" Effects Function                            
 $(".startBtn").click(function(){
    $(".box").animate({height: 300}, 3000);
    $(".box").animate({width: 300}, 3000);
});
$(".stopBtn").click(function(){
    $(".box").stop(600);
});

Toggle() method is a composition of show() and hide() method. It's basically work in both manner for selected elements. Basically this method approach toward the element visiblity. Toggle method works in reversble mode for showing and hiding content as per the visibility.

For Example

//HTML Elements
<input type="button" value="Toggle" class="toggleBtn" />
<div id="box"> Test Content here </div>
<div id="box01"> Test Content here </div>
<div id="box02"> Test Content here </div>

//Jquery Toggle Effects Function                            
$(".slideToggleBtn").click(function(){
    $("#box").toggle(700);;
    $("#box 01").toggle(1000);;
    $("#box 02").toggle(1500);;
});