Member Avatar for timwhelan

Hello, I learning javascript and trying to reverse engineer something I found on a site to understand it.

Here is a link to the full script... http://jsfiddle.net/WHQKA/

I have gotten to understand most of it so I know what is going on and can learn from it.
However this line it confusing to me and I can not find any reference information. I am hoping that someone can simply explain it so I can grow.

$('.top:first').stop().animate({
    'left': (direction === 0) ? '-100%' : '100%' // I don't understand the infor after the colon :
},400);

So, I want to understand the direction and the negative and positve after that.

Many Thanks!
Tim

  • 3 Contributors
  • 3 Replies
  • 196 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by lambing

Dani AI

Generated

A concise clarification expanding on and for 's original question.

The expression checks a condition and returns one of two CSS offset values. The sign in front of the percentage is purely positional: a negative percent places the element to the left of its containing block by that fraction of the container width, a positive percent places it to the right. Percentages for the left property are computed relative to the containing block's width, so -100% moves the element exactly one container width to the left (fully off-screen to the left) and 100% moves it one width to the right.

Practical notes and pitfalls to watch for:

  • The strict equality operator compares both value and type, so the condition only succeeds if the variable is the number 0 (not the string "0"). Normalize input or use named constants to avoid surprises.
  • left only works if the element is positioned (position: absolute|relative|fixed). If the element is static, changing left has no effect.
  • jQuery accepts percentage strings in .animate(); .stop() is used to prevent animation queue buildup when the action is triggered repeatedly. The numeric argument is duration in milliseconds (400 ms in the thread).
  • Animating left causes layout/paint work. For smoother, GPU-accelerated motion prefer CSS transforms (translateX) with transitions or class toggling.

Quick example pattern (CSS + vanilla JS) to replace layout-heavy left animation:

/* CSS */
.top { position: absolute; transition: transform 0.4s ease; }
.top.off-left  { transform: translateX(-100%); }
.top.off-right { transform: translateX(100%); }

/* JS (toggle classes) */
el.classList.remove('off-left','off-right');
if (dirFlag) el.classList.add('off-right');
else        el.classList.add('off-left');

Checklist when debugging: confirm position is set, inspect computed left/transform in DevTools, verify the actual type/value of the direction variable, and consider switching to transform-based transitions for better performance.

Recommended Answers

All 3 Replies

Member Avatar for deceptikon

I assume you're asking about the ternary operator. This:

'left': (direction === 0) ? '-100%' : '100%'

Is roughly equivalent to this:

if (direction === 0) {
    'left': '-100%';
}
else {
    'left': '100%';
}

So it's just a expressionized version of an if..else statement.

Edited by deceptikon
Member Avatar for timwhelan

Great! Thank you for the help. Still learning and understanding.
Appreciate your help!

Member Avatar for lambing

In addition, that is a ternary operator in JavaScript, just want to let you know. It saves a lot of lines by the way.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.