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

Answer 2

It looks like what you're really trying to do is create a div sitting in between the left and right buttons that has inside it 5 li tags that sit in a horizontal row, and then move them like a carousel to the left and right as the user clicks the left and right buttons.

Unfortunately if you use a DOM Inspector in any browser you'll see that the way you've put together your CSS, the 5 li tags actually run in a vertical column, causing the code to freak out a bit.

I'd put a div around the ul id=tabs and set it to exactly the width that the tabs currently occupy, and overflow: hidden. Then I'd make the ul inside be the width of the 5 elements, and shift it's left property by the width of one tab each time left or right is clicked.

You could also take a look at the source for this: http://www.baijs.nl/tinycarousel/ (top-right, "Source") or use it for your animation.