Question

我试图每半秒增加一个div的宽度。只要宽度小于100％，它就应该继续扩大。但是，它停在10%：

$('.button').click(function(){
    var progress = setInterval(function(){
         if( $(".bar").css('width') < '100%') {
            $('.bar').animate({ width: '+=10%' });
    } else {

        clearInterval(progress);
    }
    }, 500) 
});

有人知道为什么吗？

Answer 1

你为什么玩宽度的％。说实话吧。

例如：

每次宽度增加10px，宽度小于100。

$('.button').click(function(){
    var progress = setInterval(function(){
        var width=$(".bar").width();
         if( width < 100) {
            $('.bar').animate({ width: width + 10 });
    } else {
        clearInterval(progress);
    }
    }, 500) 
});

检查小提琴here

Answer 2

试试这个，只需将bar与其父宽度进行比较：

$('.button').click(function () {
    var $bar = $(".bar"),
        parentW = $bar.parent().width();
    var progress = setInterval(function () {
        if ($bar.width() < parentW) {
            $bar.animate({
                width: '+=10%'
            });
        } else {

            clearInterval(progress);
        }
    }, 500)
});

您遇到的问题是css('width')返回包含px的字符串宽度，并将其与字符串100%进行比较无效。

轻松检查它的外观：

console.log($bar.css('width'))

请注意jQuery.width()返回像素宽度的数值

的 DEMO

setInterval过早停止

2 个答案: