Jquery Animations - The Animate Method: $ (Selector) .Animate ( (Params), Speed, Callback)

jQuery Animations - The animate() Method
The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take
the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the

animation completes.
The following example demonstrates a simple use of the animate() method;

it moves a <div> element to the right, until it has reached a left property of
250px:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the
position, remember to first set the CSS position property of the element to relative, fixed, or
absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
absolute!</p>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
</head>
<body>
absolute!</p>
</body>
</html>
jQuery animate() - Using Pre-defined Values

You can even specify a property's animation value as "show", "hide", or
"toggle":
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<p>Click the button multiple times to toggle the animation.</p>

absolute!</p>
</body>
</html>
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.
So, if you want to perform different animations after each other, we take
advantage of the queue functionality:
<!DOCTYPE html>
<html>
<head>
<script>
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");

});
});
</script>
</head>
<body>
absolute!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
</script>
</head>
<body>
absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
jQuery stop() Method

The jQuery stop() method is used to stop an animation or effect before it is
finished.
The stop() method works for all jQuery effect functions, including sliding,
fading and custom animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether also the animation queue
should be cleared or not. Default is false, which means that only the active
animation will be stopped, allowing any queued animations to be performed
afterwards.
The optional goToEnd parameter specifies whether or not to complete the

current animation immediately. Default is false.
So, by default, the stop() method kills the current animation being performed
on the selected element.
The following example demonstrates the stop() method, with no parameters:
<!DOCTYPE html>
<html>
<head>
<script>
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
#panel {
padding: 50px;
display: none;
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
$("#start").click(function(){
$("div").animate({left: '100px'}, 5000);
$("div").animate({fontSize: '3em'}, 5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true, true);
});
});
</script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="stop2">Stop all</button>
<button id="stop3">Stop but finish</button>
<p>The "Start" button starts the animation.</p>
<p>The "Stop" button stops the current active animation, but allows the queued animations to be
performed afterwards.</p>
<p>The "Stop all" button stops the current active animation and clears the
animation queue; so all animations on the element is stopped.</p>
<p>The "Stop but finish" rushes through the current active animation, then it stops.</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
jQuery Callback Functions

JavaScript statements are executed line by line. However, with effects, the
next line of code can be run even though the effect is not finished. This can
create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback);
Examples
The example below has a callback parameter that is a function that will be
executed after the hide effect is completed:
<!DOCTYPE html>
<html>
<head>
<script>
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
jQuery Method Chaining

Until now we have been writing jQuery statements one at a time (one after
the other).
However, there is a technique called chaining, that allows us to run multiple

jQuery commands, one after the other, on the same element(s).
Tip: This way, browsers do not have to find the same element(s) more than
once.
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown()
methods. The "p1" element first changes to red, then it slides up, and then it
slides down
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
jQuery DOM Manipulation

One very important part of jQuery is the possibility to manipulate the DOM.
jQuery comes with a bunch of DOM related methods that make it easy to
access and manipulate elements and attributes.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral

interface that allows programs and scripts to dynamically access and update
the content, structure, and style of a document."
Get Content - text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
 text() - Sets or returns the text content of selected elements

 html() - Sets or returns the content of selected elements (including
HTML markup)
 val() - Sets or returns the value of form fields
The following example demonstrates how to get content with the jQuery
text() and html() methods:
<!DOCTYPE html>
<html>
<head>
<script>
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
</html>
Get Attributes - attr()

The jQuery attr() method is used to get attribute values.
The following example demonstrates how to get the value of the href
attribute in a link:
<!DOCTYPE html>
<html>
<head>
<script>
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href Value</button>
</body>
</html>

Jquery Animations - The Animate Method: $ (Selector) .Animate ( (Params), Speed, Callback)

Uploaded by

Jquery Animations - The Animate Method: $ (Selector) .Animate ( (Params), Speed, Callback)

Uploaded by

jQuery Animations - The animate() Method

The jQuery animate() method is used to create custom animations.

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

The optional callback parameter is a function to be executed after the

The following example demonstrates a simple use of the animate() method;

jQuery animate() - Using Relative Values

jQuery animate() - Using Pre-defined Values

<p>Click the button multiple times to toggle the animation.</p>

jQuery animate() - Uses Queue Functionality

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");

var div = $("div");

div.animate({left: '100px'}, "slow");

div.animate({fontSize: '3em'}, "slow");

jQuery stop() Method

The optional goToEnd parameter specifies whether or not to complete the

The following example demonstrates the stop() method, with no parameters:

border: solid 1px #666;

<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>

$("div").animate({left: '100px'}, 5000);

$("div").animate({fontSize: '3em'}, 5000);

<button id="stop2">Stop all</button>

<button id="stop3">Stop but finish</button>

<p>The "Start" button starts the animation.</p>

animation queue; so all animations on the element is stopped.</p>

jQuery Callback Functions

To prevent this, you can create a callback function.

A callback function is executed after the current effect is finished.

Typical syntax: $(selector).hide(speed,callback);

alert("The paragraph is now hidden");

<p>This is a paragraph with little content.</p>

alert("The paragraph is now hidden");

<p>This is a paragraph with little content.</p>

jQuery Method Chaining

However, there is a technique called chaining, that allows us to run multiple

<p id="p1">jQuery is fun!!</p>

jQuery DOM Manipulation

DOM = Document Object Model

"The W3C Document Object Model (DOM) is a platform and language-neutral

 text() - Sets or returns the text content of selected elements

alert("Text: " + $("#test").text());

alert("HTML: " + $("#test").html());

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button id="btn1">Show Text</button>

<button id="btn2">Show HTML</button>

alert("Value: " + $("#test").val());

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

Get Attributes - attr()

<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>

<button>Show href Value</button>

You might also like