Question

这是我试图带来滑动效果的javascript函数。

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

然而，效果不起作用＆amp;我确信我在使用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; display: 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更改了宽度，则必须在代码中更改它。为了更好的维护，我建议您使用div#features获取.outerWidth()的宽度，并根据该值设置动画

Answer 2

看起来你真正要做的就是在左右按钮之间创建一个div，里面有5个li标签，它们位于水平行中，然后将它们像旋转木马一样移动到左侧在用户点击左右按钮时右键。

不幸的是，如果你在任何浏览器中使用DOM Inspector，你会看到你把你的CSS放在一起的方式，5 li标签实际上是在一个垂直列中运行，导致代码吓坏了。

我在ul id = tabs周围放了一个div，并将其设置为选项卡当前占用的宽度，并溢出：隐藏。然后我将ul里面的元素作为5个元素的宽度，并且每次单击左边或右边时，将它的左边属性移动一个标签的宽度。

你也可以看一下这个来源： http://www.baijs.nl/tinycarousel/（右上角，“来源”）或者用它来制作动画。

Jquery - 动画滑动效果

2 个答案:

注意：