jQuery宽度（％）不会在windowResize上停止计算吗？

debugcn 发表于 Dev

用户名

这是我的代码：

    var callback = function () {

  $('.progress-bar').width($('.progress-bar').parent().width() - 190);


  $(".mainpart-background").animate({ width: "80%" }, 800 , function(){
    var sidepartposition = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5 ;
   $(".sidepart").animate({ "margin-right": - sidepartposition }, 100); 
   });

};
$(document).ready(callback);
$(window).resize(callback);


var sidepartpositionResize = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5 ;

$(window).resize(function(){

   $(".sidepart").css( "margin-right", "sidepartpositionResize" );

});

这就是问题：

调整窗口大小时，显示为“ 20％”的范围消失。为什么？用Firebug对其进行检查，您将看到jQuery不会停止计算80％，它将80.00213降至79.1241至79.12523 ...依此类推。突然在1-4秒后就完成了这个奇怪的过程。然后将显示20％的跨度内容。

请注意：此代码应在响应式网站上有效。

我是JS初学者。非常感谢您的帮助！

阿达里巴

尝试以下代码：http : //jsfiddle.net/7cXZj/5/

此代码使您可以绑定到调整大小事件的末尾，并且在调整窗口大小期间不会多次执行该函数。

var animate = function(){
console.log('animando');
$(".mainpart-background").css('width', 0);
$(".mainpart-background").animate({
        width: "80%"
    }, 800, function () {
        var sidepartposition = $(".progress-bar").width() * 0.1 + $(".sidepart-content").width() * 0.5;

        $(".sidepart").animate({
            "margin-right": -sidepartposition
        }, 10);
    }
);    
}

window.resizeEvt;

$(document).ready(function(){
animate();

$(window).resize(function()
{
    clearTimeout(window.resizeEvt);
    window.resizeEvt = setTimeout(function()
    {
        animate();
    }, 250);
});
});

希望能帮助到你。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。