jQuery 中的动画标题

【问题标题】：Animated Header in jQueryjQuery 中的动画标题
【发布时间】：2011-06-26 15:14:50
【问题描述】：

我发现了这个很酷的 jQuery 脚本，用于为标题设置动画：http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery。但是我想稍微改变一下，但不幸的是我的脚本技能有限。

我想做的是：当动画到达图像的末尾时，我希望它再次向上滚动，而不是像教程中那样重新开始。所以，基本上图像会不断地上下移动。

任何人都知道这会是什么样子，脚本明智吗？

问候

【问题讨论】：

标签： jquery css image animation slide

【解决方案1】：

尝试将 scrollBg() 函数更改为：

function scrollBg(){

//Go to next pixel row.
current -= step;

//If at the end of the image, then go to the top.
if (current == restartPosition){
    step = -1;
} else if (current == 0) {
    step = 1;
}

//Set the CSS of the header.
$('#header').css("background-position","0 "+current+"px");
}

这是一个非常基本的工作示例（仅用于演示目的 - 使用上面的代码）：http://jsfiddle.net/lukemartin/u2XJ8/

它所做的只是在到达循环的任一端时切换步长值。

【讨论】：

谢谢！我正在尝试类似的东西，但它没有用。你的小 sn-p 工作得很好！