2

I'm an idiot, so here it goes...

The problem: I'm using a slideshow type navigation system for looking through products. All is well and good until the next/previous arrows are clicked more than once before the animation has finished. Clicking it more than once causes the thing to completely bug out and sends the divs into an irreversible horizontal spiral through Hell. I was wondering if there were a way to stop the user from clicking the next/previous arrows more than once so that the slideshow navigation doesn't whack out.

The code:

 var SlideWidth = 305;
    var SlideSpeed = 1000;

    $(document).ready(function () {
        // set the prev and next buttons display
        SetNavigationDisplay();
    });

    function CurrentMargin() {
        // get current margin of slider
        var currentMargin = $("#slider-wrapper").css("margin-left");

        // first page load, margin will be auto, we need to change this to 0
        if (currentMargin == "auto") {
            currentMargin = 0;
        }

        // return the current margin to the function as an integer
        return parseInt(currentMargin);
    }

    function SetNavigationDisplay() {
        // get current margin
        var currentMargin = CurrentMargin();

        // if current margin is at 0, then we are at the beginning, hide previous
        if (currentMargin == 0) {
            $("#PreviousButton").hide();
        }
        else {
            $("#PreviousButton").show();
        }

        // get wrapper width
        var wrapperWidth = $("#slider-wrapper").width();

        // turn current margin into postive number and calculate if we are at last slide, if so, hide next button
        if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
            $("#NextButton").hide();
        }
        else {
            $("#NextButton").show();
        }
    }

    function NextSlide() {
        // get the current margin and subtract the slide width
        var newMargin = CurrentMargin() - SlideWidth;

        // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
        $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { SetNavigationDisplay() });

}

    function PreviousSlide() {
        // get the current margin and subtract the slide width
        var newMargin = CurrentMargin() + SlideWidth;

        // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
        $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { SetNavigationDisplay() });
    } 

And the navigation buttons:

<a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="padding-right:40px;"><img src="IMGS/arrow2.png"></a><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton" style="padding-right:40px;"><img src="IMGS/arrow.png"></a>

Any help = sex worship from me.

Thank you!

2 Answers 2

1

Set a flag called animating that you set to true when the animation starts and false in the animation end callback function. Then just test the state of the flag to determine whether you trigger the next/prev logic.

var animating = false;

// ...SNIP...

    function NextSlide() {
        if (!animating) { 
            animating = true;

            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() - SlideWidth;

            // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { animating = false; SetNavigationDisplay() });
        }
    }

    function PreviousSlide() {
        if (!animating) { 
            animating = true;

            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() + SlideWidth;

            // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { animating = false; SetNavigationDisplay() });
        }
    } 
1
  • My god. You are a genius. Worked like a charm!! Been stuck on that for two days!! ALL HAIL THE MIGHTY mVChr!!!! May 23, 2012 at 1:29
0

Have a variable defined as var animationFinished = "no"; and once complete, let it be animationFinished = yes;. Then have a conditional saying if (animationFinished == "yes") for once the click process is done.

It's better to make it a boolean variable, so that it's bool animationFinished = false; or true

Or the proper way to do it is.

$("#PreviousButton").click({ 
    $("#PreviousButton").fadeOut(300);
    $("#slider-wrapper").animate({ 
         marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', 
    ), 5000, function() {
        // Animation complete.
        SetNavigationDisplay();
        $("#PreviousButton").fadeIn(300);
        };
});

A better way to do it, is to use the .addClass and .removeClass function, and have conditionals for that.

jQuery I don't think has a function to check if every animation have finished. You just have to use the callback that the .animate function has, by what's inside the subsequent function(){ } braces.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.