JQuery undo and reset slide animations

I am writing jQuery to switch divs which in pseudo code should do the following:

item.click
    check to see if the div I want to expand is hidden
    if so
        slideup all of the divs
        when finished...
        slide down the one I want to expose

There are several elements that can be clicked (in this particular case, radio buttons).

I can make it all work (thanks to some help from wonderful people here at Overflow).

The only mistake I have is that if you click on an element, and then before the process completes, click on another element, the animations will start to add up and get confused. And I can break the display by quickly clicking between the trigger elements. I tried to fix this by doing "when they clicked, if something comes to life, it stops, and then hides them all in reset things":

$('.toggleTriggersWrapper .toggleTrigger')
    .click(function(){

        var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0);

        var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/);
        var $IDtoShow = $(IDtoShow);

        /* the next 3 lines are my attempted 'fix' */
        if($togglePanesWrapper.children('.togglePane').is(":animated")) {
            $togglePanesWrapper.children('.togglePane').hide().stop();
        };

        $togglePanesWrapper.children('.togglePane').not(IDtoShow).slideUp('fast', function(){

                /* great fix for dealing with multiple animations as found here: http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/ */
                var wait = setInterval(function() {
                    if( !$togglePanesWrapper.children('.togglePane').is(":animated") ) {
                        console.log('if is animated');
                        clearInterval(wait);
                        $togglePanesWrapper.children('.togglePane').not(IDtoShow).hide();
                        $togglePanesWrapper.children(IDtoShow).slideDown('slow');
                    }
                }, 200);                

            });
    })  

, , DO , divs "" , . div , , "", , , div , , .

?

+3
2

stop method:

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

(clearQueue) jQuery , .

(gotoEnd) jQuery, .

+4

... shoudl , , .

:

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

http://docs.jquery.com/Effects/stop

+2

Source: https://habr.com/ru/post/1725300/


All Articles