jQuery animation without queuing

问题

I am trying to figure out how .stop() and clearQueue() work. Here is my sample code in jsfiddle: http://jsfiddle.net/PsTQv/1/ You will see the animation is queuing if hove over several blocks. To work around with this, I tried to use stop() and clearQueue.Simple add stop after hide() or show() or both won't work.The behaviors like:

1. .stop().hide() : text disappears at last;
2. .stop.show(): text is alway there, won't be hidden any more
3. add both: Same as only add to show()
4. add .clearQueue().stop() in the beginning: text disappears at last, like .stop().hide()

I want to understand what the differences between clearQueue and stop to explain the behaviors above.Also I want to figure out how to achieve the animation without queueing in this example, that is, hover over the block and the text shows up in the slide effect.

Thanks

回答1:

You need to clear the animation queue in the callback function that executes when the slide animation is done:

$('.block').hover(function(){
    $('section').hide('fast');
    //$('section').stop().show('slide',{direction:'left'},1000);
    $('section').show('slide',{direction:'left'},1000,function(){$(this).clearQueue()});
},function(){});

jsFiddle

回答2:

var inAnimation = new Array();

$("div").hover(function(){
    if (!inAnimation[$("div").index(this)] ) {
        $(this).animate({ width: "200px" });
    }
}, function() {
    inAnimation[$("div").index(this)] = true;
    $(this).animate({ width: "100px" }, "normal", "linear", function() {
        inAnimation[$("div").index(this)] = false; 
    })
});

回答3:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clearQueue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>

<script>
$( "#start" ).click(function() {
  var myDiv = $( "div" );
  myDiv.show( "slow" );
  myDiv.animate({
    left:"+=200"
  }, 5000 );

  myDiv.queue(function() {
    var that = $( this );
    that.addClass( "newcolor" );
    that.dequeue();
  });

  myDiv.animate({
    left:"-=200"
  }, 1500 );
  myDiv.queue(function() {
    var that = $( this );
    that.removeClass( "newcolor" );
    that.dequeue();
  });
  myDiv.slideUp();
});

$( "#stop" ).click(function() {
  var myDiv = $( "div" );
  myDiv.clearQueue();
  myDiv.stop();
});
</script>

</body>
</html>

来源：https://stackoverflow.com/questions/14785501/jquery-animation-without-queuing

标签

javascript

jquery

jquery-animate