Friday, March 1, 2013

Jquery animate

Jquery Animate.

A small example to illustrate the animate function.In this example I have used 3 buttons which modifies the fontsize.


<button class='increase'>Increase</button>
<button class='decrease'>Decrease</button>
<button class='reset'>Reset</button>
<div class="div1">
This is the sample text and now check how the font increases and decreases when clicked on the respective buttons.
<br />
</div>
******************script****************
$(document).ready(function() {
(function display(){

$('.increase').on('click',function(){
  $('div.div1').animate({
  fontSize:'+=1'
  },100);
});

$('.decrease').on('click',function(){
  $('div.div1').animate({
  fontSize:'-=1'
  },100);
});
$('.reset').on('click',function(){
  $('div.div1').animate({
  fontSize:'16'
  },100);
});

})();
});

You can also view the live working example on the below mentioned link.

http://jsfiddle.net/informativejavascript/9YjTM/5/

Similarly you can implement the image resize functionality. I can check the below link for working example

http://jsfiddle.net/informativejavascript/vENbK/2/

No comments:

Post a Comment