Question

Can someone demystify this line for me?
It’s javascript and it works fine, I just don’t understand the exact logic behind the code. Maybe it would help to split the code into several lines or write it in c# or delphi for “comparison”.

(I got it from here: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions)

many thanks!

$('#inlay-container').animate(
{
    left: parseInt($('#container').css('left'),10) == 0 ? +$('#container').outerWidth() : 0
}...

Answer 1

$('#inlay-container').animate(
{
    left: parseInt($('#container').css('left'),10) == 0 ? + $('#container').outerWidth() : 0
}

$('#container').css('left') get the left position of #container set by CSS.

parseInt($('#container').css('left'),10) convert to integer that left.

Now you should know about ternary operator --- ? --- : ---:

General if-else:

if(something) {
  alert('done');
} else {
  alert('not done');
}

In ternary it written as:

something ? alert('done') : alert('not done');

So ? act as if and : act as else.

$('#container').outerWidth() get the width of #container including padding and border.

So therefore,

 parseInt($('#container').css('left'),10) == 0  ?  // if left of #container is 0

                   + $('#container').outerWidth() // then left increase to outerwidth

                    : 0                             // else left will set to 0

So above condition can also be written as

if($('#container').css('left'),10) == 0) {
   left = $('#container').outerWidth();
} else {
   left = 0;
}

At last, whole statement can be written as

var left = null;
if($('#container').css('left'),10) == 0) {
   left = $('#container').outerWidth();
} else {
   left = 0;
}

$('#inlay-container').animate({
    left: left
});

Related refs:

• Ternary operator

• .css()

• .outerWidth()