Question

我在css中有一个徽标/标题

#logo2 {padding:43px 20px 0 20px; background:url(images/in_Store_Marketing.jpg) top right no-repeat;}

我试图在jquery中使用.animate（）来使徽标从屏幕的右侧进入，并在屏幕的左侧。使用上面的css，它将图像设置在左侧，它应该位于动画的末尾。

目前jquery看起来像这样

$(document).ready(function(){
     $('#logo2').animate(
     { right: "+=95%" }, 3000 );
});

HTML看起来像这样

<div id="logo2" style="height:70px">

它目前什么也没做，没有动画......我错过了什么？你怎么能让这个工作以这种方式做动画？

Answer 1

试试这个吗？

.logo {padding: 35px 15 px 0 15 px; background:url(images/Logo.jpg) top right no-repeat;}

注意我向左更改为正确

并将js更改为：

$(document).ready(function(){ $('#alex').animate({ right: "+=95%" }, 3000); });

我在jsfiddle，check it out

为你编写了一个类似的例子

<强>更新

尝试我的更新，它使用绝对定位的图像，它将产生与背景图像相同的效果：

http://jsfiddle.net/tub3c/

Answer 2

你的动画是“左”，但你真的需要为“背景位置”制作动画。但是，由于这不是jQuery可以直接设置动画的基本属性之一，因此可能还需要加载jQueryUI，甚至可能无法为“背景位置”制作动画（问题在于它是一个奇怪的两个） - 价值的财产）。

Answer 3

我认为左派需要引用：

$(".logo").animate({"left": "+=400px"}, 3000);

此外，animate（）编辑位置，你没有任何位置设置，据我所知它只移动元素而不是元素内的对象。

如果你看这个小提琴，我改变了你的css一点点来添加定位，我将“logo”包裹在应用动画的div中。

希望这会有所帮助。 http://jsfiddle.net/aMaaC/1/

Answer 4

元素“position”属性必须设置为“静态”以外的其他内容，以使“top”或“left”等放置属性产生任何效果（请注意，除非另有定义，否则位置默认为“static” - 这是什么导致OPs问题）。所以：绝对的，相对的，也许是固定的（对那个不是正面的）。另外 - jquery肯定会为“background-position”设置动画，但只能一个参数，而不是两个（“-30px”，而不是“-30px 10px”）。在jQ 1.4中，您可以为两个部分设置动画，但它已在1.5中“固定”。有点可悲。

使用.animate（）jquery进行动画制作

4 个答案: