javascript - Jquery - 动画滑动效果

Question

这是我试图在其中实现滑动效果的 javascript 函数。

我想要的是，点击右键(绿色按钮)后，滑动效果应该用另一个标签替换标签，都是 block 元素。

但是，效果不起作用，我确定我在 jquery 代码上做错了什么。 (淡入淡出效果在左侧按钮(橙色按钮)上运行良好。

    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;
}

这是完整的代码(相当长)，但它给出了我要达到的效果的概念。

Jsfiddle

Answer 1

我想你想要的是这样的:http://www.apple.com/macbookair/

为此，您首先必须给 div#features 一个 overflow: hidden，否则，内容在向左移动/从左进入时不会隐藏正确的。

然后您必须将新的 ul 放置在可视区域之外并使其可见，否则新内容不会从右侧进入(假设它是您想要的)。在你的情况下，你必须设置 left: 292;显示: block 。现在，您选择旧的和新的 ul 并应用 left: '-=292px' 的动画。然后你隐藏旧的。应该就可以了。

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();
});

注意事项:

• 由于 overflow: hidden，您必须设置明确定义的高度。 height: auto 不再有意义，因为 div 不再随其内容增长。理想情况下，您可以通过 JS 调整其子项的高度。

• 我正在使用您代码中的静态值来做一个简单的解释。如果 div#features 改变了宽度，你也必须在代码中改变它。为了更好地维护，我建议您使用 .outerWidth() 获取 div#features 的宽度，并将您的动画基于该值

  <