Jquery - animating a sliding effect

Question

Here is the javascript function in which I am trying to bring about a sliding effect.

What I want is, upon clicking the right button (green coloured button), the sliding effect should replace the tab with another tab, all are block elements.

However, the effect is not working & I am sure I am doing something wrong with the jquery code. (the fade effect works fine on the left button (orange coloured button).

    function activateRightTab()
{
    var eTabIndDiv = document.getElementById ("feature_tabs_indicators").children[0];
    var iIndsCount = eTabIndDiv.childNodes[1].children.length;
    var direction = "right";
    if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
    {
        iActiveNo = iActiveNo + 1;
        if (iActiveNo != 1 || iActiveNo != 0)
        {
            $(eTabsDiv.children[iActiveNo - 1]).stop() .animate({"left" : "300px"}, 500);
            eTabsDiv.children[iActiveNo - 1].style.display = "none";
            eTabIndDiv.children[iActiveNo - 1].style.backgroundColor = "rgb(122,121,198)";            
        }
        **$(eTabsDiv.children[iActiveNo]).stop() .animate({"left" : "300px"}, 500);**
        eTabsDiv.children[iActiveNo].style.display = "block";
        eTabIndDiv.children[iActiveNo].style.backgroundColor = "rgb(0,100,200)";        
    }
    activateFeaturesContainer(direction);
    return iActiveNo;
}

Here is the complete code (rather long) but it gives an idea of the effect I am trying to achieve.

Jsfiddle

Answer 1

I think what you want is something like this: http://www.apple.com/macbookair/

For that, you first have to give div#features an overflow: hidden, otherwise, the content is not hidden while traveling to the left/coming in from the right.

You then have to position the new ul just outside the the viewable area and make it visible, otherwise the new content doesn't come in from the right (assuming it is what you want). In your case, you have to set left: 292; display: block. Now, you select both the old and new ul and apply an animation of left: '-=292px'. You then hide the old one. That should about do it.

var jNew = $(eTabsDiv.children[iActiveNo]);
var jOld = $(eTabsDiv.children[iActiveNo-1]);
jNew.css({
   'left': 292,
   'display': 'block'
});
jNew.add(jOld).stop(true).animate({
   'left': '-=292px'
}, function() {
   jOld.hide();
});

Notes:

• Because of overflow: hidden, you have to set a clearly defined height. height: auto has no meaning anymore since the div does not grow with its content anymore. Ideally, you adjust the height via JS to its children.

• I am working with the static values in your code to make a simple explanation. If div#features ever changes width, you have to change it in the code too. For better maintenance, I'd suggest you get the width of div#features with .outerWidth(), and base your animation off of that value