WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Effects - Animation


The jQuery quicken() technique gives you a chance to make custom animations.



jQuery

jQuery Animations - The energize() Method

The jQuery energize() technique is utilized to make custom animations.

Syntax:

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

The required params parameter characterizes the CSS properties to be animated.

The discretionary speed parameter indicates the term of the impact. It can take the accompanying qualities: "slow", "fast", or milliseconds.

The discretionary callback parameter is a capacity to be executed after the movement completes.

The following model exhibits a straightforward utilization of the quicken() strategy; it moves a <div> component to one side, until it has achieved a left property of 250px:

Example

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 


jQuery vivify() - Manipulate Multiple Properties

Notice that numerous properties can be vivified at the equivalent time:

Example

$("button").click(function(){
    $("div").animate({
        left: '250px',
        haziness: '0.5',
        stature: '150px',
        width: '150px'
    });
}); 


jQuery quicken() - Using Relative Values

It is likewise conceivable to characterize relative qualities (the esteem is then in respect to the component's present esteem). This is finished by putting += or - = before the value:

Example

$("button").click(function(){
    $("div").animate({
        left: '250px',
        stature: '+=150px',
        width: '+=150px'
    });
}); 

jQuery energize() - Using Pre-characterized Values

You can even indicate a property's activity esteem as "show", "hide", or "toggle":

Example

$("button").click(function(){
    $("div").animate({
        stature: 'toggle'
    });
}); 

jQuery invigorate() - Uses Queue Functionality

By default, jQuery accompanies line usefulness for animations.

This implies that on the off chance that you compose numerous vitalize() shouts toward one another, jQuery makes a "internal" line with these strategy calls. At that point it runs the vitalize calls ONE by ONE.

So, on the off chance that you need to perform distinctive activitys after one another, we take preferred standpoint of the line functionality:

Example 1

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', obscurity: '0.4'}, "slow");
    div.animate({width: '300px', obscurity: '0.8'}, "slow");
    div.animate({height: '100px', obscurity: '0.4'}, "slow");
    div.animate({width: '100px', obscurity: '0.8'}, "slow");
}); 

The precedent beneath first moves the <div> component to one side, and after that builds the text dimension of the text:

Example 2

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});