Example 1
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animation Effects</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
img{
position: relative; /* Required to move element */
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<p>
<img src="/examples/images/sky.jpg" alt="Mushroom">
</p>
</body>
</html>Example 2
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Multiple Properties Animation</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: #9d7ede;
margin-top: 30px;
border-style: solid; /* Required to animate border width */
border-color: #6f40ce;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>Example 3
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Queued Animation</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: #9d7ede;
margin-top: 30px;
border-style: solid; /* Required to animate border width */
border-color: #6f40ce;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>Animate CSS property using relative values in jQuery
Example 4
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animation with Relative Values</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: #9d7ede;
margin-top: 30px;
position: relative; /* Required to move element */
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<p><strong>Note:</strong> Click the "Start Animation" button multiple times to see how the relative value works.</p>
<div class="box"></div>
</body>
</html>Example 5
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animation with Pre-defined Values</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.box{
width: 80%;
height: 200px;
background: #9d7ede;
margin-top: 30px;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>
</head>
<body>
<button type="button">Toggle Animation</button>
<div class="box"></div>
</body>
</html>