Documentation

Release:jQuery 1.2/Effects

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the full jQuery 1.2 Release Notes.

Contents

[edit]

.stop()

Stops all the currently running animations on all the specified elements. If any animations are queued to run, then they will begin immediately.

Click the Go button to start the animation, the click the STOP button to stop it where it's currently positioned.

// Start animation
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// Stop animation when button is clicked
$("#stop").click(function(){
  $(".block").stop();
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    // Start animation
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// Stop animation when button is clicked
$("#stop").click(function(){
  $(".block").stop();
});
  });
  </script>
  <style>div { 
    position: absolute; 
    background-color: #abc; 
    width: 90px; 
    height: 90px;
    margin: 5px; 
  }
</style>
</head>
<body>
  <button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>

</body>
</html>

[edit]

%/em Animations

Animations can now be done using em values or percentages as well as pixel values. They can even be mixed within the same animate() call.

Click the button to animate the div with a number of different properties.

// Using all 3 unit types within one animation.
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    // Using all 3 unit types within one animation.
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

  });
  </script>
  <style>div { 
   background-color: #bca; 
   width: 100px; 
   height: 40px;
   border: 1px solid green;
   overflow: hidden;
}</style>
</head>
<body>
  <button id="go">» Run</button>
<div id="block">Hello!</div>
</body>
</html>

[edit]

Color Animations

A new official jQuery plugin that supports animating CSS colors of elements by using the new jQuery.fx.step.

Supported CSS properties: 'backgroundColor'; 'borderBottomColor'; 'borderLeftColor'; 'borderRightColor'; 'borderTopColor'; 'color'; 'outlineColor'.

Colors can be specified as one of a pre-set range of named colours; in rgb format (ie 'rgb(221,221,221)'); hex (ie '#dddddd'); or shorthand hex (ie '#ddd').

Flashes the div to alert the user. Changes its background color to pink, and once it's done, returns to the original color.

$("#go").click(function(){
  $(".block").animate( { backgroundColor: 'pink' }, 1000)
    .animate( { backgroundColor: 'blue' }, 1000);
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#go").click(function(){
  $(".block").animate( { backgroundColor: 'pink' }, 1000)
    .animate( { backgroundColor: 'blue' }, 1000);
});
  });
  </script>
  <style>.block { 
   background-color: blue; 
   width: 150px; 
   height: 70px;
   margin: 10px; 
}</style>
</head>
<body>
  <script src="http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js"></script>
<button id="go">» Run</button>
<div class="block"></div>

</body>
</html>

[edit]

Relative Animations

Relative animations behave just like normal animations, but their units are specified as being relatively position according to the current position of the element, rather than being an absolute position.

You can specify a relative animation by writing the number and (optional) units as string, preceded by a "+=" (for a relative animation that adds to the current position) or "-=" (that takes away from the current position).

Stops a currently running animation on an element.

$("#right").click(function(){
  $(".block").animate({left: '+=50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-=50px'}, "slow");
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#right").click(function(){
  $(".block").animate({left: '+=50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-=50px'}, "slow");
});
  });
  </script>
  <style>div { 
    position: absolute; 
    background-color: #abc; 
    width: 90px; 
    height: 90px;
    margin: 5px; 
  }
</style>
</head>
<body>
  <button id="left">«</button> <button id="right">»</button>
<div class="block"></div>

</body>
</html>

[edit]

Simultaneous Animations

As has always been the case, animations in jQuery are automatically queued, which allows animate() calls to be chained.

Now, if a queue: false flag is included in the options of animate(), then that animation will not go in the queue and will begin running immediately.

The first button expands the div out to 90% width while the font-size is increasing. Once the font-size is at 10em, 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.

$("#go1").click(function(){
  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});

$("#go2").click(function(){
  $("#block2").animate( { width: "90%"}, 1000 )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#go1").click(function(){
  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});

$("#go2").click(function(){
  $("#block2").animate( { width: "90%"}, 1000 )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});
  });
  </script>
  <style>div { 
   background-color: #bca; 
   width: 200px; 
   height: 30px; 
   border: 1px solid green;
   margin: 3px;
   overflow: hidden;
}</style>
</head>
<body>
  <button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
</body>
</html>

[edit]

.queue() / .dequeue()

Two existing internal jQuery queueing methods have been tweaked and made more useful, for general animation use.

.queue() can be used to access and manipulate the animation queue for a particular element.

The following queueing methods were added:

  • .queue()
    Returns a reference to the first element's queue (which is an array of functions).
  • .queue(Function)
    Adds a new function, to be executed, onto the end of the queue of all matched elements.
  • .queue(Array<Function>)
    Replaces the queue of all matched element with this new queue (the array of functions).

And the following dequeueing method was added:

  • .dequeue()
    Removes a queued function from the front of the queue and executes it.
[edit]

:animated

See: Selectors, :animated.

[edit]

Extensible Animations

You can now extend jQuery animations with a function that is fired on every step of the animation that changes the style of the element being animated. It can be extended for specific css properties, or even to create a custom animation type.

For example, you can pass in an extra step function to .animate() to perform actions like animation synchronization.

Move many elements, simultaneously, using a single animation.

$("#go").click(function(){
  $(".block:first").animate({ left: 100 }, {
    duration: 1000,
    step: function(now, fx){
      $(".block:gt(0)").css("left", now);
    }
  });
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#go").click(function(){
  $(".block:first").animate({ left: 100 }, {
    duration: 1000,
    step: function(now, fx){
      $(".block:gt(0)").css("left", now);
    }
  });
});
  });
  </script>
  <style>div { 
   position: relative; 
   background-color: #abc; 
   width: 40px; 
   height: 40px;
   float: left;
   margin: 5px; 
}</style>
</head>
<body>
  <button id="go">» Run</button>
<div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div>
</body>
</html>

Additionally, jQuery provides a complete API for writing your own custom animation types, allowing you to provide the user with ways to animate colors, classNames, or any other type that you devise.

Creating a new animation plugin that moves elements diagonally

jQuery.fx.step.corner  = function(fx) {
  // Change both top and left values.
  // Will work with em and % values too!  
  fx.elem.style.top = fx.now + fx.unit;
  fx.elem.style.left = fx.now + fx.unit;
};
 
// Fire the new animation type.
$("#go").click(function(){
  $("#block").animate({ corner: '40px' }, 1000);
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    jQuery.fx.step.corner  = function(fx) {
  // Change both top and left values.
  // Will work with em and % values too!  
  fx.elem.style.top = fx.now + fx.unit;
  fx.elem.style.left = fx.now + fx.unit;
};
 
// Fire the new animation type.
$("#go").click(function(){
  $("#block").animate({ corner: '40px' }, 1000);
});
  });
  </script>
  <style>div { 
   position: relative; 
   background-color: #abc; 
   width: 40px; 
   height: 40px; 
}</style>
</head>
<body>
  <button id="go">» Run</button>
<div id="block"></div>
</body>
</html>

Retrieved from "http://docs.jquery.com/Release:jQuery_1.2/Effects"