Jquery Animate works randomly
<p>Basically I have a shoutbox and new shouts are added to the bottom of the shoutbox.
I want each shout to scroll down animated.</p>

<p>Problem: It only Animates when it wants to.. Which is about every 10 shouts if your lucky..</p>

<p>Now I have tried applying .stop() and .dequeue()
A few other things to figure out why it randomly happens</p>

<p>Here is the code I am using..</p>

<pre><code>function tbSingleScroll(){
if (tbscroll &lt;= 0) {
    $('#shouts').animate({scrollTop: $('#shouts')[0].scrollHeight});
}
}
</code></pre>

<p>Now because it is a real time Shoutbox and set to update every 1 second to check for new shouts.
It also sets scroll to 1 second as well.
I have a countdown function that calls this function every second to scroll down.</p>

<p>Now so people could read previous shouts and scroll up I added a timer for 20 seconds
using this code</p>

<pre><code>$("#shouts").scroll(function () { 
currentScrollTop = $("#shouts").scrollTop(); 

if (tempScrollTop &gt; currentScrollTop ) {
    tbscroll = 20;
}
tempScrollTop = currentScrollTop;
});
</code></pre>

<p>Now is there a better way to set the scrolling?
Before applying this is was impossible to scroll up as it would just keep you locked to the bottom of the shoutbox because it was set to scroll down every second.
Now it detects that you have scrolled up and puts 20 seconds before it will call scroll down. </p>

<p>So I think its sending too many requests and just not doing anything.</p>

<p>Any help would be appreciated as to how I could fix this so I could have a nice effect on each incoming shout.
Also any help with getting the scrolling better would be nice..</p>
