Question

这是我的代码：

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

});

这是问题所在：

跨度显示＆＃34; 20％＆＃34;调整窗口大小时消失。为什么？用Firebug检查它你会看到jQuery不会停止计算80％，它会变成80.00213到79.1241到79.12523 ......依此类推。 1-4秒后突然间，这个奇怪的过程完成了。然后出现20％的跨度内容。

请注意：此代码适用于自适应网站。

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

Answer 1

试试此代码：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);
});
});

希望它有所帮助。

jQuery width（％）不会在windowResize上停止计算？

1 个答案: