Question

I have written a function which fires when a particular menu item is clicked. essentially the code replaces (by changing class to .activedock) a dock at the bottom of the page along with the name of said dock which is pulled from the (‘li’) in the menu which has been clicked. This is a little hard to articulate but hopefully this makes sense.

All of this is animated with the extended jquery-ui versions of addClass and removeClass to give the effect of the dock sliding off the bottom of the screen and the replacement selected dock being slid up into place. At the same time the dock name fades out, is replaced and the new name fades back into place.

This all works wonderfully, however the effect screws up if i select another menu item while the animation is still taking place. What a need to do is to modify the code below to simply queue the function if it is called again while the animation is still taking place. Alternatively, if this proves to complicated, I would be happy to just be able to prevent the function from being called again while it is still active.

Does anyone know how I would go about this.

function selectFilter($this) {


var $filtername = $this.text();
var $activedock = $('.activedock');
$selected_dock = $('#' + $filtername);
$name = $('#filter_name').find('h1');


if ( $filtername == $activedock.attr('id') ) {

return false;

}


var $filtertext = $filtername;      
        $activedock.removeClass('activedock', 1000);
                $name.fadeOut('1000', function() {

                    $selected_dock.addClass('activedock','1000');

                    $name.text($filtertext);
                    $name.fadeIn('1000', function() {

                    var $menuWidth = $('#filter_name').width();

                    $('#filter_menu').css('min-width', $menuWidth);


                    });
                });

}

P.S. I am relatively new to jQuery so my apologies if the code above is not using best practice etc…. I’m still learning.

Also the above function is called when the user clicks the menu item as shown in the code below:-

//Show filter menu

$(document).ready(function() {

$('#full-width-layout_c1_col-1-1_1').on( 'mouseenter mouseleave click', '#filter_name', function(event) {

var $menu = $('#filter_menu');
var $icon = $('#popupicon');


//Hover over Filter Name
if (event.type == 'mouseenter') {
                    $menu.addClass('menu_hovered_item');
                    $icon.show('fade', 200);
        }
        else if (event.type == 'mouseleave'){
                    $menu.removeClass('menu_hovered_item');
                    $icon.hide('fade', 200);
            }



//Open menu on click
        else if (event.type == 'click'){


            $menu.show('fade','slow');

//hover or click on menu item

                    $('#full-width-layout_c1_col-1-1_1').on( 'mouseenter mouseleave click', '#filter_menu li', function(event) {

                    var $menuItem = $(this);

                            if (event.type == 'mouseenter') {
                            $menuItem.addClass('menu_hovered_item');
                            }
                            else if (event.type == 'mouseleave'){
                            $menuItem.removeClass('menu_hovered_item');
                            }

                            else if (event.type == 'click'){
                            var $this = $(this);
                            selectFilter($this);
                            $menu.hide();
                            }

                    });

        }    

    });  
});

Answer 1

Detect Animation

It is possible to detect whether the animation is still running for a specific element.

The technique is detailed in this article.

var wait = setInterval(function() {
    if( !$("#element1, #element2").is(":animated") ) {
        clearInterval(wait);
        // This piece of code will be executed
        // after element1 and element2 is complete.
    }
}, 200);

Prevent Animation Queue Builup

Alternatively, you can slo prevent a animation queue byusing this technique.