Question

I ran into a problem that comes with jquery animation. I am having the user be able to click a button and based off that button direction they click it slides all the list(li) elements to that opposing direction. The problem comes in that I have it set to wrap-around inside a div, so when a list element ends on one side it getting the animation to slide off the div sight but getting the css style attribute set to the opposite side off the screen so it can be ready to scroll down for the next button click. But when the user clicks the button multiple times it queues up all the elements on top of each other because the animation hasn’t finished. So then I attached the stop() animation to the elements, but then the second problem comes in that when the user clicks the button fast multiple times it, The elements never get to wrap around, they will just stay dissappeared until you click the button slowly or if you start pressing the button faster after some of them are dissappeared then start back slow then only the ones that were visible when slow are still wrapping in the div until the next wrap around:

quick example:

function Rotate(){
    $("li.headline").each(function(){
      var left= $(this).css("left");
      left=left-100;
      if(left>99){
         $(this).stop().animation({left:left}, 'slow', function(){
         $(this).css("left",left);});
      }else{
         $(this).stop().animation({left:left}, 'slow', function(){
         $(this).css("left",max);}); //max is the max "left" calculated from all list items
      }
    });
 }
$("button.next").click(function(){
Rotate();
});

could someone help me

html/css example

#scroll{
position:relative;
overflow:hidden;
width:300px
}
.headline{
position:absolute;
float:left
}

  <div id="scroll">
    <ul>
      <li  class="headline"><a>First</a>
      <li  class="headline"><a>Second</a>
      <li  class="headline"><a>Third</a>
      <li  class="headline"><a>Fourth</a>
      <li  class="headline"><a>Fifth</a>
    </ul>
  <div>

Answer 1

I corrected the problem by adding a extra check in the if condition as so

var index;//this is the current li at the head that is incremented by the button click 
//and updated outside this function
$("li.headline").each(function(i){ //added i to get the current index the each is on
if(left>99&&index==i){ 
     $(this).stop(true, false).animation({left:left}, 'slow', function(){ //also made the first true
      //and second false, so the animation wouldn't rush across the screen but true so it wouldn't
      // build up the queue
     $(this).css("left",left);}); 
  }else{ 
     $(this).stop(true, false).animation({left:left}, 'slow', function(){ 
     $(this).css("left",max);}); //max is the max "left" calculated from all list items 
  }