jQuery: The Write Less, Do More JavaScript Library

Effects/stop

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

[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.

Examples:
Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.

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

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

    // Start animation in the opposite direction
    $("#back").click(function(){
      $(".block").animate({left: '-=100px'}, 2000);
    });



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

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

    // Start animation in the opposite direction
    $("#back").click(function(){
      $(".block").animate({left: '-=100px'}, 2000);
    });

  });
  </script>
  <style>div { 
    position: absolute; 
    background-color: #abc;
    left: 0px;
    top:30px;
    width: 60px; 
    height: 60px;
    margin: 5px; 
  }
  </style>
</head>
<body>
  <button id="go">Go</button> 
  <button id="stop">STOP!</button>
  <button id="back">Back</button>
  <div class="block"></div>
</body>
</html>

NameType

Retrieved from "http://docs.jquery.com/Effects/stop"