javascript - 当到达视口(viewport)点时，然后转动我的侧边栏

Question

我需要能够调整我的侧边栏。 这可行，但我还需要在达到视口(viewport) > 740px 时隐藏侧边栏。 troggle 也需要工作。我已经走了很长一段路，但我认为我必须将这两者结合起来才能让它正常工作。

有人知道如何做到这一点吗？

CHECK OUT MY FIDDLE PLEASE >

我的脚本:

$('.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?

希望这有帮助。