0

我正在尝试组合一个流畅的滑动面板，该面板应考虑加载时窗口的内部宽度以及调整大小：根据实际窗口大小，面板应向左/向右移动四分之一窗口宽度。到目前为止，我设法绕过了用户调整窗口大小时发生的多个调整大小事件，感谢这个线程。

var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
  uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
  clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();

var slidinNav = function(rtr){
document.getElementById('navPanel').style.left = -rtr + "px";
document.getElementById('navPanel').style.width = rtr + "px";

$('.showMenu').click(function(){
        $('#navPanel').animate({left: '+=' + rtr +'px'}, 400); 
        });

        $('.hideMenu').click(function(){
        $('#navPanel').animate({left: '-=' + rtr + 'px'}, 400); 
        }); 
}

$(document).ready(function(){
var winW = window.innerWidth;
 var navPosLeft=winW/4;
 slidinNav(navPosLeft);
});

$(window).resize(function () {
waitForFinalEvent(function(){
 var winW = window.innerWidth;
 var navPosLeft=winW/4;
 slidinNav(navPosLeft);
 console.log(" Left / Width : " + navPosLeft);
}, 200, "un identifiant unique ?");
});

但是作为一个完整的 javascript 新手，我还没有找到解决方案来阻止我用来存储窗口宽度值和偏移量的变量来计算所有连续的值。比冗长且不清楚的解释更好，请参见此处的 jsfiddle 。

这是我的问题：我应该重置变量（如何和何时）还是尝试获取最后一个值（再次：如何和何时）？感谢您对此的任何帮助；- )

4

1 回答 1

0

如果我不完全了解您在此处寻找的内容，请纠正我，但在我看来，您可能会使它变得比需要的更复杂。看起来您可以简单地继续使用 % 并拥有以下功能：

 $('.showMenu').click(function(){
            $('#navPanel').animate({left: 0}, 400); 
            });

            $('.hideMenu').click(function(){
            $('#navPanel').animate({left: "-20%"}, 400); 
            });

如此处所示：http: //jsfiddle.net/X9Jrc/3/

于 2013-04-30T00:03:05.323 回答