Question

总新手或菜鸟;）给jQuery所以请耐心等待我......

我正在使用标准的.animate方法和计时器插件在两个背景图像上循环动画，其中一个是其父级的子级。效果是一个乐器清洁设备上下滑动吉他弦，如此链接所示http://sahuspilwal.com/jquery/animate.html

我的jQuery代码＆amp; XHTML如下：

 $(function(){

     $('#swipe').css({backgroundPosition: '433px 100%'});

     $('#swipe').everyTime(10, function(){
         $('#swipe').animate({backgroundPosition:"(433px 42%)"}, 2000, 'swing');
         $('#swipe').animate({backgroundPosition:"(433px 100%)"}, 2000, 'swing'); 
     });
 });

 <div id="wrapper">
     <div id="guitar">
         <div id="swipe"></div>
     </div>
 </div>

然而，当包含div的内容超过背景图像的高度，即吉他时，动画的坐标可能不对齐。请参阅上面的链接，了解具有动态高度的内容的动画。

任何人都可以告诉我如何根据包含DIV id =“guitar”的动态高度设置DIV id =“swipe”backgroundPosition的值，以便动画无论高度如何都能正确对齐父容器???希望有意义......

提前感谢您提供任何帮助/指导或反馈。

亲切的问候，

Sahus Pilwal

Answer 1

在运行时，你总是可以通过jquerys获得任何div的高度。

.height()
.width()

你甚至可以通过jquery的attr属性获取背景图像的宽度和高度

$('#imageid').attr('width');
$('#imageid').attr('height');

然后根据滑动的高度和宽度，您可以设置吉他的高度和宽度，如下所示

$('#guitar').css('width',calculated width);
$('guitar').css('height',calculated height)

如果您还有其他需要，请告诉我

使用.animate方法和计时器插件时的jQuery动态背景位置

1 个答案: