背景上的jQuery动画方法

Posted 2023-05-08

【中文标题】背景上的jQuery动画方法

【英文标题】：Jquery Animation Method on Background

【发布时间】：2011-12-15 21:18:31

【问题描述】：

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

我正在使用 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>

提前感谢您的帮助。

【问题讨论】：

你介意创建一个jsfiddle吗？

【参考方案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 ，因此您只能看到一张。

【讨论】：

我现在看到内联样式改变了 Firebug 的顶部位置，但 bg-image 没有移动。我需要绝对定位列表吗？

不，你必须做其他事情。我不相信您可以为背景图像位置设置动画。我认为您需要包含背景图像的 ul “下方”另一个元素。然后你就可以制作动画了。

查看我的编辑。这可能是你的一个选择。另外，@Richard 提到的插件是一个很好的解决方案。

因此，如果我将 ul 包装在具有固定高度并隐藏溢出的包含 div 中，将 lis 设置为包含 div 的高度并具有背景图像，然后为 ul 的顶部设置动画，它应该可以工作?编辑：提问前应该刷新一下，3分钟前你的回答就是这个问题的答案。

技术上是的，但是当您为 设置动画时， 也会随之设置动画，而您在第一次移动后将看不到它们。

【参考方案2】：

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

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

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

另见jquery animate background position。

【讨论】：

我不想使用插件，因为它看起来应该是一项简单的任务，并且我将与回调链接在一起的 4 个或动画。这是第一个。根据 jQuery .animate() 文档，您可以使用我正在尝试实现的方法。

JQuery 没有内置对背景位置动画的支持，所以是的，你确实需要这个插件。

知道了，谢谢。我想我会使用@fehays 方法。我想使用精灵来确保一旦动画开始，所有图像都会被加载。