在Jquery中使用带有百分比的if语句始终返回false

Question

我有一小部分代码可以创建无尽的旋转木马.当它以像素完成时,它工作正常:

$('.left').click(function(){
        $('.box').animate({left: '+=100'}, 100, function(){
        var $last = $('.box').last();
        if ($last.css('left') == '100px') {
            $last.prependTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
});

http://jsfiddle.net/tmyie/4CuLE/1/

但是,如果我从像素更改为百分比,它并没有工作且if statement是假的.

$('.left').click(function(){
        $('.box').animate({left: '+=5%'}, 200, function(){
        var $last = $('.box').last();
        if ($last.css('left') == '5%') {
            $last.prependTo('.container').before('\n\r').hide().fadeIn();
            $('.box').css('left','0%');
        }
    });
});

http://jsfiddle.net/tmyie/4CuLE/2/

谁会知道为什么会这样？我正在使用响应式布局,所以我需要保持百分比.

Answer 1

根据jQuery的文档,.css()返回计算值.

请注意,元素的计算样式可能与样式表中为该元素指定的值不同.例如,计算的尺寸样式几乎总是像素,但它们可以在样式表中指定为em,ex,px或%.不同的浏览器可以返回逻辑上但在文本上不相等的CSS颜色值,例如,#FFF,#fffffff和rgb(255,255,255).

因此,您可能无法将其与百分比值进行比较.