CODEWITHSUNDEEP
javascriptjquerycsscarousel
Ben Taliadoros
Ben Taliadoros

Reputation: 9371

Carousel animation event issue

I have an issue with a carousel I have built. It has elements inside a container which are moved 'left' by the size of the visible container when the button with class moveCarouselRight is clicked.

My issue is that when the user clicks too fast, ie double click, the animation seems to fire twice, meaning the elements are not properly fitted in the container as if the first 'left' operation had not completed.

As you can see I tried to fix this with the 'disabled' flag but it seems the second click event is fired before the js from the first event has reached that line of code.

var disabled = false;

$('.moveCarouselRight').on('click', function() {

if (!disabled) {

    disabled = true;

    //change css property 'left' depending on container size

    disabled = false;
}
});

Link to jsFiddle:
jsfiddle.net/6TPcT/5

Upvotes: 0

Views: 283

Answers (2)

Ben Taliadoros
Ben Taliadoros

Reputation: 9371

I fixed this by binding a click event to the selector on load:

$('.selector').click(moveLeft);

In the method I unbound the click event:

function moveLeft() {
    $(this).unbind('click');
    //css transition stuff
}

Then, I added a listener to the end of the css transitions:

$("selector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",  function(){
    $(this).siblings('.nextThree').click(moveThreeRight);
});

Works a charm :)

Thanks for the help on this

Upvotes: 0

Ani
Ani

Reputation: 4523

Use this:

JS

$(".moveCarouselRight").dblclick(function(event){
    event.preventDefault();
});

OR

$(".moveCarouselRight").dblclick(function(event){
    return false;
});

OR

$(".moveCarouselRight").one("click", function(event) {
    //do something
});

Link: http://api.jquery.com/one/

Upvotes: 2

Related Questions