jQuery宽度(%)不停止计算在窗口大小

jQuery width (%) doesn't stop calculate on windowResize?

本文关键字：计算 窗口大小 不停止 宽度 jQuery      更新时间：2023-09-26

这是我的代码:

http://jsfiddle.net/7cXZj/

    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%"的span在调整窗口大小时消失。为什么?用Firebug检查它，你会发现jQuery不会停止计算80%，它从80.00213到79.1241再到79.12523……等等......突然1-4秒后，这个奇怪的过程就完成了。然后显示20%的span内容。

请注意:此代码应适用于响应式网站。

我是一个JS初学者。非常感谢你的帮助!

试试下面的代码:http://jsfiddle.net/7cXZj/5/

此代码允许您绑定到resize事件的结束，并且在调整窗口大小期间不会多次执行该函数。

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

希望能有所帮助。

相关文章：