CODEWITHSUNDEEP
javascriptjquery
lexeme
lexeme

Reputation: 2973

Getting rid of the double click effect

Here's my fiddle. As you can see I've defined a simple click event handler:

$('#traveller > a').click(function(e) {
    e.preventDefault();

    var $ul = $('#traveller ul');
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
             $ul.animate({top: '+=' + itemHeight});
        }
    }
});

I've noticed that when I make few double clicks quickly, pressing a.handle-next/a.handle-prev, ul position changes unexpectedly.

Howcome I avoid this behavior?

Upvotes: 0

Views: 93

Answers (4)

Andrei Cristian Prodan
Andrei Cristian Prodan

Reputation: 1122

You could just prevent it with a $ul.stop(); just before you define who $ul is

here's the fiddle

var $ul = $('#traveller ul');
$ul.stop(true,true);

http://jsfiddle.net/A5u43/23/

Upvotes: 0

Eduard Dyckman
Eduard Dyckman

Reputation: 165

You need to lock any action with your traveller, untill animation is finished. Here i used lock variable, but you can use any approach to lock it. For this purpose use callback on animate: 

      $ul.animate({top: '-=' + itemHeight}, 400, 'swing', function(){
            lock = false;
        });

Here is the jsfiddle like

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Check if an animation is occuring prior to executing the body of the event handler.

if(!$ul.is(":animated")){
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
            $ul.animate({top: '+=' + itemHeight});
        }
    }
}

Working Example http://jsfiddle.net/A5u43/19/

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

Just check if $ul is animated:

if($ul.is(':animated')) return;

DEMO

Upvotes: 4

Related Questions