如何使用javascript从左到右然后向下移动div [关闭]答案

【问题标题】：How to move divs from left to right then down using javascript [closed]如何使用javascript从左到右然后向下移动div [关闭]
【发布时间】：2014-12-11 21:41:40
【问题描述】：

您好，我的任务是创建一个图像动画，允许图像从左到右然后向下移动。

当图像向下移动时，它必须被溢出隐藏，因为它会超出背景图像。

图像会连续循环，从左到右再到下。网上有类似的例子how to move/slide an image from left to right。

但是，这只会从左向右滑动然后停止。动画中也只有一张图像。

【问题讨论】：

标签： javascript jquery html css loops

【解决方案1】：

为什么不直接使用 css？这是fiddle

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    animation: mymove 5s infinite;
}


/* Standard syntax */
@keyframes mymove{
    0%   {top: 0px; left: 0px;}
    25%  {top: 0px; left: 100px;}
    50%  {top: 0px; left: 0px;}
    75%  {top: 50px; left: 0px;}
    100% {top: 100px; left: 0px;}
}

【讨论】：

【解决方案2】：

我会考虑使用 CSS 动画。它是动态的吗？在关键帧的末尾，您可以简单地使用溢出：隐藏。

【讨论】：

不，它只是几张图片流过背景图片。
在这种情况下，他的建议是完美的，请查看我的实施答案。

【解决方案3】：

尝试使用 jQuery 函数 animate()，如下例所示：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_right

简单地说，通过jQuery找到你想要移动的元素，用正确的参数对他调用animate为0，然后再次用底部0调用animate，然后再次将元素放在开头没有动画和整个循环无限。

我不确定这是否可行，只是一个草稿：

$(document).ready(function(){
  var element = $("something");
  while (true) {
    element.animate({right:"0"});
    element.animate({bottom:"0"});
    element.css("right", "auto").css("bottom", "auto").css("left", "0").css("top", "0");
  }
});

【讨论】：