jquery greater than/less than only looks at first number?

Question

I have a drag script where i'm dragging div.slider, i'm keeping track of the "left" value for div.slider, and having it fade out when it's greater than 68, but the problem is that it fades out when it gets to 6, not 68. If I change the number to 85, then it will fade out at 8, not 85. does anyone know why this is happening?

$(document).ready(function() {

  $(".slider").mousemove(function() {
   var rightStyleValue = $('div.slider').css('left');
   $('.display_value').html(rightStyleValue);

      if ($('.slider').css('left') > 68 + 'px') {
              $('.container').fadeOut(500);   
      }   

  });
});

Answer 1

Strings are compared lexicographically. Try the numerical comparison instead by converting the pixel value to integer:

if (parseInt($('.slider').css('left')) > 68) {
    // …
}