CODEWITHSUNDEEP
javascriptjqueryhtml
Nico Pavlotsky
Nico Pavlotsky

Reputation: 53

Prevent jQuery animation from queueing

HI, first of all, I've read a lot of posts about this but no one seems to work. I have a content "slider" made by me in jQuery. I'm such a noob on this but after 1 hour it worked. The problem comes when you try to push the button which brings the next "slide" out several times rapidly.

Here's how my "code" works:

First I set a variable named "count" to be at 1000.

I have 4 content divs. I hide 3 of them. When the user clicks the "next" button, the variable checks if the value is 1000. If this is true, then I set the opacity to the first div to 0, hide the div and fadeIn the other one (the div two). Then I set the variable "count" two 1001 and reset the opacity of div 1 (it does not appear since it's hidden).

If at the first moment, the variable is not 1000 checks if it's value is 1001 and so on. You get the point?

It's a little bit tricky but it works. All working right but when you hit the "next" button several times rapidly, all the animations mess up. Please if someone could told me how I fix this I'll be completely grateful.

If you want to see the "slider" go here: http://www.sinvenderse.com/hg/index.htm

and scroll to the end of the page. You can see that if you click the slider buttons slowly it works perfect, but, when you try to hit them rapidly all messes up.

Okay, sorry for my bad English (I'm Argentinian) and I want to tell you that I've tried with everything:

finish();
stop();
clearQueue();

You can see the source code with Ctrl+U or right click, inspection element on Chrome.

And if you know the solution I'll give you a virtual hug (:

Upvotes: 0

Views: 50

Answers (1)

lima_fil
lima_fil

Reputation: 1771

Try hiding all slides except current on each step. There are two slides with display: block at some moment

if (count == 1000){
    $('.th-1').animate({opacity: 0},600,function(){
        $('.think-content:not(.th-2)').hide();
        $('.th-2').fadeIn(600);
    });
    ...

Upvotes: 2

Related Questions