CODEWITHSUNDEEP
jqueryjquery-animate
Fidgeter
Fidgeter

Reputation: 13

Stop Jquery .Animate() on New .Animate()

I'm trying to animate a push out box to display a list of things to do in the area.

Unfortunately if you click on 2 or more of the boxes quick enough it expands all the clicked boxes and then locks the boxes from being selected again.

You can click on any of the unselected boxes it'll work but I can't for the life of me prevent the issue of two of them being out at the same time.

I'm not 100% sure I'm using the .stop command properly.

Please help!

Here's my Code. There's also a jsfiddle link here with a bit of a demo. http://jsfiddle.net/hceFT/4/

$(document).ready(function() {
    $("#attractionsbox").css( { width:0 } );
    $("#entertainmentbox").css( { width:0 } );
    $("#diningbox").css( { width:0 } );
    $("#attractionspointer").css( { width:0 } );
    $("#entertainmentpointer").css( { width:0 } );
    $("#diningpointer").css( { width:0 } );
    $("#experiences").css( 'overflowY' , 'hidden' );
});


$("#freefunbutton").click(function() {
    if ($("#freefunbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#freefunpointer").animate({
                    width: 40
                }, 50, function() {
                    $("#freefunbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});

$("#attractionsbutton").click(function() {
    if ($("#attractionsbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#attractionspointer").animate({
                    width: 40
                }, 50, function() {
                    $("#attractionsbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});

$("#entertainmentbutton").click(function() {
    if ($("#entertainmentbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#entertainmentpointer").animate({
                    width: 40
                }, 50, function() {
                    $("#entertainmentbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});

$("#diningbutton").click(function() {
    if ($("#diningbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#diningpointer").animate({
                    width: 40
                }, 50, function() {
                    $("#diningbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});

Upvotes: 1

Views: 183

Answers (1)

N. Taylor Mullen
N. Taylor Mullen

Reputation: 18301

When you call a new animate cancel all pre-existing ones via clearQueue: http://api.jquery.com/clearQueue/

Or if you want to maintain some animations only stop the ones you don't want to run anymore via stop: http://api.jquery.com/stop/

Upvotes: 1

Related Questions