Total members 11813 |It is currently Thu Jan 23, 2020 1:24 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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>




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : JQuery Animations
 add sound to your animations in flash     -  
 Flashing Graphics animations with threads     -  
 accordion using JQuery     -  
 How to start JQuery     -  
 Using firebug with JQuery     -  
 slide down using JQuery     -  
 Load tweets using JQuery     -  
 Stop animation in JQuery     -  
 Show Spinner using JQuery     -  
 Handle Cookies using JQuery     -  



Topic Tags

JQuery Animate






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com