ドキュメント

Effects/stop

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

stop[clearQueue][gotoEnd] )

Stops all the currently running animations on all the specified elements.
If any animations are queued to run (and the clearQueue argument is not set to true), then they will begin immediately.
Arguments:
clearQueue (Optional)Boolean
A Boolean (true/false) that when set to true clears the animation queue, effectively stopping all queued animations.
gotoEnd (Optional)Boolean
A Boolean (true/false) that when set to true causes the currently playing animation to immediately complete, including resetting original styles on show and hide and calling the callback function
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="http://code.jquery.com/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