Animating 'Div' blocks with different effects simultaneously
In this tutorial, we will discuss about how to animate 'Div' blocks with different effects simultaneously using jQuery.
In this tutorial, we will discuss about how to animate 'Div' blocks with different effects simultaneously using jQuery.
Animating 'Div' blocks with different effects simultaneously
In this tutorial, we will discuss about how to animate 'Div' blocks with
different effects simultaneously using jQuery. In this Example, we have two Div
Blocks. When we click on 1st block button, It expands the div
out to 90% width while the font-size is increasing. Once the font-size change is
complete, the border animation will begin. The second button starts a
traditional chained animation, where each animation will start once the previous
animation on the element has completed.
animateDivBlocks.html
<!DOCTYPE html>
<html>
<head>
<TITLE>Animate Div blocks</TITLE>
<style>div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="b1">» Animate TextBlock1</button>
<button id="b2">» Animate TextBlock2</button>
<button id="b3">» Animate Both TextBlock</button>
<button id="b4">» Reset</button>
<div id="textblock1">Text Block1</div>
<div id="textblock2">Text Block2</div>
<script>
$("#b1").click(function(){
$("#textblock1").animate( { width:"90%" }, { queue:false, duration:3000
} )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#b2").click(function(){
$("#textblock2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000);
});
$("#b3").click(function(){
$("#b1").add("#b2").click();
});
$("#b4").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
</script>
</body>
</html> |
OUTPUT
After clicking 1st button :
After Clicking Second button :
Download Source Code
Click
here to see demo
