JQuery Animations

DrRakha

JQuery Animation Examples such as Larger, move steps , jump to a position , larger fonts, speed control etc.
html code

<html>
<head>
<title>animatation in JQuery</title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script> 
$(document).ready(function(){
    //move to a new position with different size and opacity.
  $("button.animation1").click(function(){
    $("div.ta").animate({
      left:'250px',
      bottom:'100px',
      opacity:'0.6',
      height:'200px',
      width:'200px'
    });
  });
  
      // move to a new position with different size and opacity.
    $("button.animation2").click(function(){
    $("div.to").animate({
      left:'250px',
 
      opacity:'0.6',
      height:'200px',
      width:'200px'
    },'slow');
  });
  
       // return to original and then back again.. 
     $("button.animation3").click(function(){
    $("div.to").animate({
     
 
      opacity:'toggle',
      
    });
  });
  
         // slides or frames
       $("button.animation4").click(function(){
         var div=$("div.to");
       div.animate({width:'300px',opacity:'0.8'},"slow");
         div.animate({height:'100px',opacity:'0.4'},"slow");
         div.animate({width:'100px',opacity:'0.8'},"slow");
  });
  
       // Move step right
         $("button.animation5").click(function(){
         var div=$("div.to");
       div.animate({  left:'250px',
    left:'+=30px'},"slow");
     
  });
  
      $("button.animation6").click(function(){
         var div=$("div.to");
         // Speed can be slow,fast, or time in milliseconds 
       div.animate({ fontSize:'+=1em'},"slow");
     
  });
  
   
});


</script> 
</head>
 
<body>
 
<p>Moving static Divs</p>
<div class="ta" style="background:#FF2211;height:58px;width:58px;position:absolute;">
</div>

<div class="to" style="background:#77FF33;height:58px;width:58px;left:100px;position:absolute;">
CM
</div>
<br/><br/>
<br/><br/>
<button class="animation1">Animation 1</button>
<button class="animation2">Animation 2</button></br>
<button class="animation3">Toggle</button>
<button class="animation4">Animation 4</button><br/>
<button class="animation5">Step Right</button>
<button class="animation6">Larger Font</button>
</body>
</html>

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

JQuery Animations

Topic Tags