背景上的jquery动画方法

Question

对于帮助新手的好心人来说，简单的问题和简单的要点。

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

我有一个带有 1600x2000 像素背景图像的 ul。我想将 background-position 更改为 -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，所以你只能看到一张。