在jquery动画中，如何使用自定义对象而不是div？

我的情况开始是这样的：我想要为div的背景图像设置动画，但似乎用jquery我无法检索背景图像的各个位置（背景位置）。 所以我想为什么不创建一个对象并为它的值设置动画，然后将这些值放在css中，但是我无法弄清楚如何完成它。 这是我尝试过的。

var obj={t:0}; $("#wrapper").animate({ obj:100 //I tried obj.t & t as well },1000,'linear',function(){},function(){ $("#wrapper").css({ 'background-position':obj.t+"% 0%" }); }); 

另外我需要问的另一个问题是，如果图片真的很大，我的意思是大约4000x4000px，将它设置为背景图像并更改背景位置或移动div本身会更好吗？

Answer 1

你需要使用animate方法的step函数 ，更重要的是你需要为实际对象设置动画..而不是#wrapper元素

 var obj = { t: 0 }; $(obj).animate({ // call animate on the object t: 100 // specify the t property of the object to be animated }, { duration: 1000, easing: 'linear', step: function(now) { // called for each animation step (now refers to the value changed) $("#wrapper").css({ 'background-position': now + "% 0%" }); } }); 

演示 http://jsfiddle.net/gaby/yPq8s/1/

Answer 2

您可以使用.css()方法检索背景图像的背景位置：

 $('#el').css('background-position'); 

我创建了一个简单的JS小提琴，它可以为背景图像添加动画效果：

http://jsfiddle.net/yPq8s/

Answer 3

如何为背景图像创建一个单独的div，如果它有内容然后将该div的内容放入另一个z-index较高的div中，然后使div（使用背景图像）本身动画而不是为背景位置设置动画？

我想你的第二个问题的答案与你想要达到的目标有关。 虽然如果选择将带有bg图像的div分配给它自己的z-index，那么我认为使用div的位置本身而不是背景图像的背景位置是值得的。