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

Question

I've got a small amount of code that creates an endless carousel. When it's done in pixels, it works fine:

$('.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/

But if I change from pixels to percentages, it does not work and the if statement is false .

$('.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/

Would anyone know why this is? I'm working with a responsive layout, so I need to keep the percentages.

Answer 1

According to jQuery's documentation , .css() return the computed value.

Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, eg, #FFF, #ffffff, and rgb(255,255,255).

So you may not compare it with percent value.

Answer 2

What's happening here is that, even if you originally set it with a percentage, jQuery's animate() method automatically converts it to pixels. Therefore, when you then call css() , you get a pixel value.

Answer 3

As stated by @Nathan P. you may not compare percent values, but if you need to keep your CSS percentages, you can retrive the box width in pixels with $('.box').width() like this:

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

here is the fiddle

Note all css dimensions are in percentage.

Hope it helps