Adding maximize effect to a div: How to animate div with jQuery and JavaScript?
In this tutorial we will use jQuery library and write JavaScript program for animating a div, in the animation we are maximizing the size of div along with the content inside it. The jQuery library also comes with many animation function which you can use to animate your object on the web page. The beauty of jQuery is that it provides easy method for adding custom animation code and create own animation.
The animate() method of jQuery is used to add custom animation to web page component. The animate() method of jQuery allows the developers to write code which performs custom animation by updating the css property of the component. The animate() method works by changing css property value from one state to another, further the change duration can be specified which gives animation effect to the target object.
For example you change the width of an object with following code:
$("#imagebox").animate({height: "410px"});
This code can be called on the button click or attached by any other event as per the application requirement.
In our example we have a div and we are animating it with following code:
$("#btnAnimation").click(function(){
$("#animationblock").animate({
width: "50%",
/*opacity: 0.3,*/
marginLeft: "0.5in",
fontSize: "3em",
borderWidth: "8px"
}, 1500 );
});
Above code is executed when user clicks on the "Start Animation" button on the screen.
Here is full code of the example program:
<html>
<head>
<title>How to animate div with jQuery and JavaScript?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnAnimation").click(function(){
$("#animationblock").animate({
width: "50%",
/*opacity: 0.3,*/
marginLeft: "0.5in",
fontSize: "3em",
borderWidth: "8px"
}, 1500 );
});
});
</script>
<style>
div {
background-color:white;
width:100px;
border:1px solid grey;
}
</style>
</head>
<body>
<button id="btnAnimation">Start Animation</button>
<p> </p>
<div id="animationblock">Animation Block</div>
</body>
</html>
In this program we have to include jQuery library using following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
On the document ready, click event is attached to the button:
$(document).ready(function(){
$("#btnAnimation").click(function(){
$("#animationblock").animate({
width: "50%",
/*opacity: 0.3,*/
marginLeft: "0.5in",
fontSize: "3em",
borderWidth: "8px"
}, 1500 );
});
});
Above code is executed when user clicks on the button and it calls the jQuery animate() function which changes the css property of div to create maximization effect.
Here is the screen shot of the example when executed:
Screen shot after animation completion:
Check jQuery Maximize div example code online.
In this tutorial we have learned to animate a div and add maximize effect using jQuery.
Here are more tutorials of jQuery: