javascript - setInterval 过早停止

Question

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

JSFIDDLE

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

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

谁知道为什么？

Answer 1

试试这个，简单地比较 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