jQuery: Preventing list scroll?

Question

I have this scenario: Using an ajax query I fetch some data items and push them into a ul element as an li element. I use $("ulele").append(new_li_item). I wrote my own custom scroll for this ul element using the following whenever an event is detected:

$("ulele").animate({scrollTop: '+=' + 200}, 'slow');

The problem is when I fire that event and the list scrolls due to the animate function above, I want to keep it stable for at least a few seconds. When it scrolls down, elements are still being pushed so the list keeps scrolling no matter what. I am using the following way to add the li elements (which already have a display:none attribute):

$("#liele").delay(6000 * i).show("slow")

Is there a way I can pause this from happening without really stopping the activity of pushing elements into the ul list?

Answer 1

Maybe try .delay()?

http://api.jquery.com/delay/

Something like this:

$("ulele").animate({scrollTop: '+=' + 200}, 'slow').delay(1000);

Answer 2

Try putting the animation in a function and before adding an element to the ulele, remove the animation, and add it again after you get the data is one way. That is one way to do it, but from the looks of it, it sounds operational intensive.

The following should work better - When you create the new li element, start it out with display:none and after it is fetched using the AJAX call, update the display attribute to inline or how ever you need it. That should do better than the above one.