背景上的jQuery动画方法

Question

为帮助新手的善良灵魂提供的简单问题和要点。

我正在使用 Wordpress，jQuery 已正确加载到标题中。

我有一个 1600x2000px bg-image 的 ul。我想将背景位置更改-500px，以创建类似于购物中心广告板的滑动效果。如果是 :last-child，而不是 -500，它将 +1500（回滚到顶部），但我想我可以自己处理 if/else，只是无法让 .animate() 运行。

HTML

<ul id="indexSlides">
    <li id="messageBox">
    </li>
    <li id="slideA">
      <p>Some Text</p>
    </li>
    <li id="slideB">
      <p>Some more Text</p>
    </li>
    <li id="slideC">
      <p>Some different Text</p>
    </li>
    <li id="slideD">
      <p>Some Text</p>
    </li>
</ul>

CSS：

ul#indexSlides {
    height: 500px;
    background: url('images/slides.jpg') 0 0 no-repeat transparent;
}

ul#indexSlides > li > p {
    display: none;
}

jQuery:

<script type="text/javascript">

// function to slide the background of the list

jQuery(document).ready(function($) {

setInterval(function() {
    $("#indexSlides").animate({
        top: '-=500',
    } , {
        duration: 1500,
    }
}, 5000),
});

</script>

提前感谢您的帮助。

Answer 1

您缺少一个括号，有一个额外的逗号或 2，以及一个逗号而不是分号：

jQuery(document).ready(function($) {
   setInterval(function() { 
    $("#indexSlides").animate({
            top: '-=500'
        } , {
            duration: 1500
        });
    }, 5000);
});

编辑： 这是一个使用 2 个 div 的示例：http://jsfiddle.net/fehays/yXLv3/1/

内部 div 是整个背景图像的高度。外部 div 的高度为一张幻灯片和一个 overflow:hidden ，因此您只能看到一张。

Answer 2

我相信你必须使用background-positions animation jQuery plugin。

在这里，没有插件就无法工作：http://jsfiddle.net/pLx2H/

在这里，使用插件：http://jsfiddle.net/pLx2H/1/

另见jquery animate background position。