Animating 'Div' blocks with different effects simultaneously

Home Tutorial Jquery Animating 'Div' blocks with different effects simultaneously

Animating 'Div' blocks with different effects simultaneously
Posted on: August 2, 2010 at 12:00 AM

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

Related Tags for Animating 'Div' blocks with different effects simultaneously:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics