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

 
 

Share on Google+Share on Google+
Animating 'Div' blocks with different effects simultaneously
Posted on: August 2, 2010 at 12:00 AM
Advertisement
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">&raquo; Animate TextBlock1</button>
<button id="b2">&raquo; Animate TextBlock2</button>
<button id="b3">&raquo; Animate Both TextBlock</button>

<button id="b4">&raquo; 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

Advertisement

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


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 2, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com