Javascript 当到达视口点时，请拖动侧边栏

我需要能够在我的边栏上游动。 这是可行的，但当到达视口>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");
    }
});

$（'.troggler'）。切换(
函数（）{
$（'.right'）.animate（{“right”：“-400px”}，“slow”）；
$（'.troggler'）。动画（{“背景位置”：“-25px”}，“快速”）；
}，函数（）{
$（'.right'）.animate（{“right”：“0”}，“slow”）；
$（'.troggler'）。动画（{“背景位置”：“0”}，“快速”）；
})
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<740）{
$（“.right”）.animate（{“right”：“-400px”}，“slow”）；
$（'.troggler'）。动画（{“背景位置”：“-25px”}，“快速”）；
}
否则{
$（'.right'）.animate（{“right”：“0”}，“slow”）；
$（'.troggler'）。动画（{“背景位置”：“0”}，“快速”）；
}
});

我猜

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

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

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

演示：

您的代码可以如下所示：

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);
});

函数showNavi（）{
$（'.right'）.animate（{“right”：“0”}，“slow”）；
$（'.troggler'）。动画（{“背景位置”：“0”}，“快速”）；
}
函数hideNavi（）{
$（'.right'）.animate（{“right”：“-400px”}，“slow”）；
$（'.troggler'）。动画（{“背景位置”：“-25px”}，“快速”）；
}
$（'.troggler'）.toggle（函数（）{
showNavi（）；}，
函数（）{
hideNavi（）；
});
函数applyLayout（）{
如果（$（窗口）.width（）<740）{
hideNavi（）；
}否则{
showNavi（）；
}
}
var定时器=0；
var delayToCall=（函数（）{
返回函数（回调，毫秒）{
如果（计时器>0）{
清除超时（计时器）；
}
定时器=设置超时（回调，毫秒）；
};
})();
$（窗口）。调整大小（函数（）{
delayToCall（函数（）{
applyLayout（）；
}, 500);
});

您可能需要检查此问题：


希望这能有所帮助。
不建议使用该切换方法，因为它已被弃用，在1.7版中与演示版一样有效，但如果升级会导致问题，我愿意进行任何改进，尽管我不打算更新js版本。谢谢分配naota！有一件事：当有一个大视口并单击“关闭”时，什么也不会发生，再次单击，它就会工作。知道怎么解决吗？@fourroses，知道。我猜这是因为
.toggle（）
的第一个参数是show，第二个参数是hide。您可能希望将顺序更改为相反，如下所示：