Question

我从头开始将下面的滑入式菜单代码放在一起。我试图添加一个超时功能，以防止由于多次点击而导致过多的滑入和滑出。每200ms只需单击一次即可实际触发动画。我试过但尝试过但无法弄明白。救命！：）

var togglerWidth = $('#mobile-menu-toggler').css('min-width');     
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({      
        width: menuWidth
    },
    500,
    'swing',
    function () {
    });

    $('#mainmenu-mobile').animate({
        right: "0px"
    }, 
    500,
    'swing',
    function () {
    });
}

var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width();
    $('#mobile-menu-toggler').animate({
        width: togglerWidth
    },
    500,
    'swing',
    function () { 
    });

    $('#mainmenu-mobile').animate({
        right: -menuWidth
    },
    500,
    'swing',
    function () {
    });
}

var activate = function () {
    $('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}

var deactivate = function () {
    $('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
    $(this).toggleClass('inactive-menu');
    $('#mainmenu-mobile').toggleClass('inactive-menu');
    if ($(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }
});
    $(document).mousedown(function (e) {
    var container = $("#mobile-menu-wrap");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        slideRight();
        deactivate();
    }
});

FIDDLE：http://jsfiddle.net/Lam9rwLg/2/

Answer 1

使用此代码。定时器设置为2秒。根据需要进行更改。

//Mobile Menu Animation

var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler

//Slide left function
var slideLeft = function () {
    var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({
        width: menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    $('#mainmenu-mobile').animate({
        right: "0px"
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback 
    });
}

//Slide Right Function
var slideRight = function () {
    var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({
        width: togglerWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    $('#mainmenu-mobile').animate({
        right: -menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback     
    });
}

var activate = function () { //switch to 'active-menu' class
    $('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}

var deactivate = function () { //switch back to 'inactive-menu' class
    $('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}

$("#mobile-menu-toggler").click(function () {
     $("#mobile-menu-toggler").unbind('click');
    $(this).toggleClass('inactive-menu');
    $('#mainmenu-mobile').toggleClass('inactive-menu');
    $("#mobile-menu-wrap").prop("disabled",true);
    if ($(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }


    setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});

var setFunction=function(){
$("#mobile-menu-toggler").bind('click',function () {
     $("#mobile-menu-toggler").unbind('click');
    $(this).toggleClass('inactive-menu');
    $('#mainmenu-mobile').toggleClass('inactive-menu');
    $("#mobile-menu-wrap").prop("disabled",true);
    if ($(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }


    setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});

}



//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
    var container = $("#mobile-menu-wrap");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        slideRight();
        deactivate();
    }
});

更新了链接： http://jsfiddle.net/Lam9rwLg/5/

Answer 2

希望以下代码可以帮助您。如果它按照您的意图工作，请告诉我。以下是更新的JavaScript代码。

所以它确实：

点击Click事件后，将删除事件订阅。

会有setTimeout事件再次订阅该事件。

通过这样做，可以防止多次点击。

//Mobile Menu Animation

var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler

//Slide left function
var slideLeft = function () {
    var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({
        width: menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    $('#mainmenu-mobile').animate({
        right: "0px"
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback 
    });
}

//Slide Right Function
var slideRight = function () {
    var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({
        width: togglerWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    $('#mainmenu-mobile').animate({
        right: -menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback     
    });
}

var activate = function () { //switch to 'active-menu' class
    $('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}

var deactivate = function () { //switch back to 'inactive-menu' class
    $('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}

$(function(){
    TogglerClickSetup();
});

function TogglerClickSetup() {
    $("#mobile-menu-toggler").click(function () {
        $("#mobile-menu-toggler").off();
        $(this).toggleClass('inactive-menu');
        $('#mainmenu-mobile').toggleClass('inactive-menu');
        if ($(this).hasClass('inactive-menu')) {
            slideRight();
            deactivate();
        } else {
            slideLeft();
            activate();
        }
        window.setTimeout(TogglerClickSetup, 500);
     });
}

//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
    var container = $("#mobile-menu-wrap");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        slideRight();
        deactivate();
    }
});

超时功能可防止过多的点击动画

2 个答案: