How do I get this if-statement with jQuery .css to work?

Question

In my code jQuery code (I know the if statement isn't jQuery), the css property "right" for the class "slider" does NOT equal 30, yet "container" is still fading out on mousedown.. What am I doing wrong? I want it to be: if the class of slider has a "right" css property equal to 30px, then fadeout the container.

$(document).ready(function() {
$(".slider").mousedown(function() {

 if ($('.slider')
 .css({'right':30})
 ) {
 $('.container')
 .fadeOut('slow');

 } 
});
});

Answer 1

Maybe:

if($('.slider').css('right') == '30'){ ... }

There might be a unit, like px at the end of the value there. Not sure.

Answer 2

$('.slider').css({'right':30}) returns an array object which evals to true always

you want if ($('.slider').css('right') == "30px") ...

Answer 3

$(document).ready(function() {
    $(".slider").mousedown(function() {
        if ($('.slider').css('right') == 30) {
      $('.container').fadeOut('slow');
        }       
    });
});