javascript - jQuery 宽度 (%) 不会在 windowResize 上停止计算？

Question

这是我的代码:

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%”的跨度会消失。为什么？用 Firebug 检查它，你会看到 jQuery 不会停止计算 80%，它会从 80.00213 到 79.1241 到 79.12523 ...等等。 1-4 秒后突然完成了这个奇怪的过程。然后出现 20% 的跨度内容。

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

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

Answer 1

试试这个代码:http://jsfiddle.net/7cXZj/5/

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

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

希望对您有所帮助。