Js - making sense of timing & conflicting properties
<p>All,</p>

<p>Am using jquery to animate a sliding effect on the <em>li</em> elements. While I have managed to create the sliding effect, it is not being animated correctly.</p>

<p><strong>Issue:</strong>
I think the issue is to with the jquery animation timing, which conflicts with the rest of the code immediately below the jquery animate call.</p>

<p><strong>Code:</strong>
Here is the relevant code for review (jsfiddle link underneath):</p>

<pre><code>    function activateRightTab()
{
    var eTabIndDiv = document.getElementById ("feature_tabs_indicators").children[0];
    var iIndsCount = eTabIndDiv.childNodes[1].children.length;
    var direction = "right";
    if (iActiveNo &lt; iTabsCount - 1 &amp;&amp; iActiveNo &gt;= 0)
    {
        iActiveNo = iActiveNo + 1;
        var eCurrentTab = eTabsDiv.children[iActiveNo];
        var ePreviousTab = eTabsDiv.children[iActiveNo - 1];
        if (iActiveNo &gt; 0)
        {
            ePreviousTab.style.position = "relative";
            $(ePreviousTab).animate({"right" : "210px"}, 250);
            $(eTabIndDiv.children[iActiveNo - 1]).animate({"width" : "12px"}, 250).animate({"width" : "18px"}, 125);

            // ****** the following three lines conflict with the above jquery line ******  

            self.setTimeout(ePreviousTab.style.width = "0", 250);
            ePreviousTab.style.color = "transparent";
            ePreviousTab.style.position = "static";
        }
        eCurrentTab.style.position = "relative";
        eCurrentTab.style.right = "-210px";
        eCurrentTab.style.width = "210px";
        eCurrentTab.style.backgroundColor = "rgb(165,145,176)";
        eCurrentTab.style.color = "black";
        $(eCurrentTab).animate({"right" : "10px"}, 250).animate({"right" : "0"}, 125);
        $(eTabIndDiv.children[iActiveNo]).animate({"width" : "127px"}, 250).animate({"width" : "121px"},125);
    }
    if (iActiveNo === iTabsCount - 1 &amp;&amp; eRightScrollButton.style.opacity === "0.5")         //springy effect when no other right tab
    {
        $(eTabsDiv.children[iActiveNo]).animate({"right" : "10px"}, 100).animate({"right" : "-5px"}, 45).animate({"right" : "0"}, 10);          
    }
    (iActiveNo === iTabsCount - 1) ? eRightScrollButton.style.opacity = "0.5" : false;
    activateFeaturesContainer(direction);
    return iActiveNo;
}
</code></pre>

<p><a href="http://jsfiddle.net/RtaK7/1/" rel="nofollow"><strong>Here is the working prototype on jsfiddle</strong></a> <em>(press the light green button 'rght' button on the right)</em></p>
