0

我制作了这个 jFiddle，让人们几乎可以看到我需要的东西。

http://jsfiddle.net/Vjp68/

基本上，列表中的最后一项是两行，需要比其他项稍微向上移动才能位于灰色条上方。同样第二次通过项目消失，然后淡入，它们应该始终可见......

我在网上获取了 js 代码并添加了 margin-top 动画和整行：

$("#top ul" + " li:eq(" + j + ")").animate({"margin-top" : "0px"});

其余的是所有原始标记...

所以我添加的 margin-top: -18 动画正在向上移动所有项目，我添加了上面的行，这样当列表完成最后一项时，它不会继续向上移动，而是从原点开始......

虽然我还没有真正正确地设置它......我真正需要它做的是继续看起来好像列表在第一次运行时向上移动......但是当它说

“应该向上移动的两行描述”

下面应该是第一行，“Short Company Description 1”并循环到无穷大。

所以基本上我需要一个能够移动最后一个项目的循环列表，或者任何项目，除非这更难，否则希望保持简单。

感谢您提供任何信息！

4

2 回答 2

3

请参阅此示例小提琴

function cyclee(){
    $("#top ul" + " li:eq(0)").delay(3000)
        .animate({"opacity" : "0", "margin-top" : "-18"}, 400, function(){
             $("#top ul").append($(this).css("opacity", "1").css("margin-top", "0"));
             cyclee();
            });
};

在对其进行动画处理并恢复其默认 css 属性后，您需要将第一个附加<li>到末尾。<ul>

于 2013-03-03T14:16:06.503 回答
1

基本上，您可以利用元素的高度来偏移每个循环的边距顶部。为了无限循环，为第一项设置动画并为动画完成添加回调。在动画完成函数中，重置动画项的边距顶部和不透明度并将其附加到 ul （现在，第一项成为最后一项，<ul>第二项成为 中的第一项<ul>）。结果，我们只需要为第一个项目设置动画。


这是jsfiddle：http: //jsfiddle.net/Vjp68/1/

function cyclee(){
    var h =  $("li:eq(0)", self).outerHeight(true) * -1;
    $("li:eq(0)", self).animate({"opacity" : "0", "margin-top" : h + "px"}, delay, function(){
        $(this).css({"margin-top":"0","opacity" : "1"});
        self.append(this);
        cyclee();
    });     
};
于 2013-03-03T13:46:29.353 回答