连续运动的动画与jQuery

continuous movement 连续运动的动画与jQuery

我想重新在上述网站卡车的时刻，它在MooTools是完成的。我如何编码，有没有一个jQuery插件来做到这一点？

因此，从屏幕开始到结束为对象添加动画，然后重新开始。我将如何做到这一点的jQuery

任何帮助将é赞赏

来源

2011-01-27 nokiko

这里有一个的jsfiddle样品http://www.jsfiddle.net/XpAjZ/

更多jQuery的动画：http://api.jquery.com/animate/

示范示出了2盒以不同的速度等在屏幕上的动画（参见小提琴）

Relevan牛逼jQuery代码：

var animateMe = function(targetElement, speed){ 

    $(targetElement).css({left:'-200px'}); 
    $(targetElement).animate(
     { 
     'left': $(document).width() + 200 
     }, 
     { 
     duration: speed, 
     complete: function(){ 
      animateMe(this, speed); 
      } 
     } 
    ); 

}; 
animateMe($('#object1'), 5000); 
animateMe($('#object2'), 3000);

来源

2011-01-27 22:35:47

感谢有点尴尬它是这么简单:) – nokiko 2011-01-27 22:51:13

嗨我怎么会增加一个停止/开始悬停，所以我徘徊它停止移动我再次鼠标和它继续，我看到停止（），但没有看到一个开始（）或继续 – nokiko 2011-01-27 23:47:26

如果你有一个画面一个div里面，像这样：

<div style="width: 1000px"> 
<img src="truck.png" id="truck" style="margin-left: -100px" /> 
</div>

这里是一个jQuery的例子，在图片滑动DIV /屏幕：

function moveTruck(){ 
    $('#truck').animate(
     {'margin-left': '1000px'}, 
     3000, // Animation-duration 
     function(){ 
      $('#truck').css('margin-left','-100px'); 
      moveTruck(); 
     }); 
    } 

moveTruck();

。希望作品出来......

来源

2011-01-27 22:30:37 Christian

Here's an example of the following code.

此使用position:absolute CSS属性和.animation()^[DOCS]方法回调是用jQuery相对简单。你基本上会被通过命名函数内的一段时间内动画的left CSS属性，然后调用在动画回调函数在动画完成的时候，像这样：

var animateTruck = function() { 

    $('#truck').css('left','-50px') 
       .animate({'left':$(window).width()}, 
         4000, 
         'linear', 
         function(){ 
          animateTruck(); 
         }); 
}; 

animateTruck();

来源

2011-01-27 22:34:38 mVChr

感谢有点尴尬它是这么简单:) – nokiko 2011-01-27 22:54:08

你怎么能做到这一点，但有内容框慢慢地来回移动在屏幕的宽度（不打算通过屏幕，而在另一侧开始回）？

来源

2014-09-17 21:01:12 John

连续运动的动画与jQuery

回答

相关问题