Question

我编写了一个在单击特定菜单项时触发的函数。基本上代码替换（通过将类更改为.activedock）页面底部的停靠点以及从已单击的菜单中的（'li'）拉出的所述停靠栏的名称。这有点难以表达，但希望这是有道理的。

所有这些都使用扩展的jquery-ui版本的addClass和removeClass进行动画处理，以使滑块从屏幕底部滑落，并将替换的选定底座滑动到位。同时码头名称淡出，被替换，新名称逐渐消失。

这一切都非常有效，但是如果我在动画仍在进行时选择另一个菜单项，效果会搞砸。需要做的是修改下面的代码，如果在动画仍在进行时再次调用它，则简单地对函数进行排队。或者，如果这被证明是复杂的，我会很高兴能够阻止在它仍处于活动状态时再次调用该函数。

有谁知道我会怎么做。

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。我对jQuery比较新，所以如果上面的代码没有使用最佳实践等，我很抱歉....我还在学习。

当用户点击菜单项时，也会调用上述函数，如下面的代码所示： -

//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

检测动画

可以检测动画是否仍在针对特定元素运行。

该技术详见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);

阻止动画队列构建

或者，您可以使用this technique来阻止动画队列。

Answer 2

在每个动画功能之前使用stop(true, true)，

喜欢：$(this).stop(true, true).fadeIn()，

$(this).stop(true, true).fadeOut()，

$(this).stop(true, true).show('fade','slow')。

true中的第一个stop将清除动画队列，第二个true将使正在进行的动画立即完成。

如果再次调用它太快，如何排队jQuery函数以防止不正确的行为

2 个答案: