Question

我需要能够改变我的侧边栏。这有效但我还需要在到达视口时隐藏侧边栏＆gt; 740px。 troggle也需要工作。我走得很远，但我认为我必须将这两者结合起来让它正常工作。

有人知道这么热吗？

我的剧本：

$('.troggler').toggle(
    function() {
        $('.right').animate({"right": "-400px"}, "slow");
        $('.troggler').animate({"background-position": "-25px"}, "fast");
    }, function() {
        $('.right').animate({"right": "0"}, "slow");
        $('.troggler').animate({"background-position": "0"}, "fast");
})

$(window).resize(function() {
    if ($(window).width() < 740) {
        $(".right").animate({"right": "-400px"}, "slow");
        $('.troggler').animate({"background-position": "-25px"}, "fast");
    }
    else {
        $('.right').animate({"right": "0"}, "slow");
        $('.troggler').animate({"background-position": "0"}, "fast");
    }
});

Answer 1

我猜$(window).resize()会在您调整窗口大小时触发多个事件。要解决此问题，您可以等待调整大小（拖动）完成。

// Basic Concept is ...
$(window).resize(function () {

    if( ... event not fired ...  ){
       setTimeout(function(){
            // toggle your navi
       },500);
    }
    ....
});

样本：http://jsfiddle.net/VseLR/13/

您的代码可能是这样的：

function showNavi(){
    $('.right').animate({"right": "0"}, "slow");
    $('.troggler').animate({"background-position": "0"}, "fast");
}
function hideNavi(){
    $('.right').animate({"right": "-400px"}, "slow");
    $('.troggler').animate({"background-position": "-25px"}, "fast");
}

$('.troggler').toggle(function() {
        showNavi();},
    function() {
        hideNavi();
    });

function applyLayout() {
    if ($(window).width() < 740) {
       hideNavi();
    }else {
       showNavi();
    }
}
var timer = 0;
var delayToCall = (function () {
    return function (callback, ms) {
        if (timer > 0) {
            clearTimeout (timer);
        }
        timer = setTimeout(callback, ms);
    };
})();
$(window).resize(function () {
   delayToCall(function(){
     applyLayout();
    }, 500);
});

您可能想查看此问题：
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

希望这有帮助。

到达视口点然后切换我的侧边栏

1 个答案: