使两个 div 朝同一方向一个接一个地进行动画处理

Question

我已经搜索过这个，但给出的最佳答案是“在您的项目周围包裹一个 div，然后将您的动画/滚动添加到其中”。我同意，这将是解决我的问题的一个快速简单的解决方案，但是，不幸的是，我不能在我的 div 周围包裹一个 div，因为我有一个特定的问题，需要我为每个 div 单独设置动画。我会详细说明...

我有一个名为“highlight”的 div，其中有一些分两行的图块，每行 5 个图块形成一个网格。这就是我所说的“功能区”，它是页面底部的一个面板，它在所有突出显示图块周围有一个容器 div，具有指定的宽度并隐藏了溢出，允许我的内容在以下情况下加载和隐藏并滑动。使用寻呼机上的“上一个”或“下一个”按钮。我的代码如下所示：

    <div class="ribbon-display">
      <div class="display-container clearfix">
       <div id="highlight">
         <div class="top-row clearfix">                                     
      <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
         </div>
      <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
       </div>
       <div id="highlight" class="new-highlight">
         <div class="top-row clearfix">                                     
      <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
         </div>
      <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
      <div class="ribbon-tile"></div>
          <div class="ribbon-tile"></div>
       </div>
      </div>            
    </div>

我正在做的是一次加载 10 个图块。然后，当单击“下一步”按钮时，将进行 ajax 调用以拉入接下来的 10 个图块。然后将它们作为新的“突出显示”div 附加到我的容器 div 中的内容。因此，我现在有两个“突出显示”div，其中包含 10 个彼此相邻的图块。然后，我可以使用 jquery 'animate' 函数将它们滚动到左侧，以更改元素的“左侧”位置。然而，当我这样做时，第一个突出显示面板比它旁边的下一个突出显示面板向左滑动得更快。这意味着滑动中有间隙，而不是彼此相邻的滑动毛绒。如果所有幻灯片内容图块都已预加载并且只是随幻灯片一起显示/隐藏，那么您该怎么办...

所以我的问题是，如何让这两个 div 同时向左滑动，一个直接在其之后另一个以同样的速度？正如我所说，我已经探索过使用 animate 函数并更改左侧位置，就像这样......

$('#highlight').animate(
  {left:'-=971'},
  30000
);
$('.new-highlight').animate(
  {left:'-=971'},
  200
);

并且还尝试更改 animate 函数中的 leftScroll 参数，并更改每个突出显示 div 的速度以尝试减慢第一个 div 的速度假装动画看起来很光滑。有人有尝试这样做的经验吗？我可以使用“scrollLeft”功能吗？

任何帮助将不胜感激！预先感谢大家！

克雷格

Answer 1

您可以使用延迟功能进行菊花链连接。

$('#highlight').animate({left:'-=971'},30000);
$('.new-highlight').delay(30000).animate({left:'-=971'},200);

请注意，这是毫秒...您制作动画需要 30 秒！ :)

“我怎样才能让这两个div同时向左滑动，一个以相同的速度紧接着另一个？”

同时还是先后？这是两件不同的事情:)

这是一个小提琴，因为我不确定你的动画意图:)
http://jsfiddle.net/NZkf8/

Answer 2

您可以将“完成”函数传递给 animate 方法，该函数将在第一个完成时调用。

$('#highlight').animate({left:'-=971'},30000, function(){
  $('.new-highlight').animate(
    {left:'-=971'},
    200
  );
});

Answer 3

我很难准确理解您正在寻找的内容...但是您可以通过设置一个间隔来实现“跟随”的效果，使第二个 div 动画到第一个 div 的位置。 O_o

像这样：

var follow = setInterval(function(){
  $('.new-highlight').animate(
    {left : $('#highlight').position().left},
    1000
  );
},1000)

$('#highlight').animate(
  {left:'-=971'},
  30000,
  function(){
    window.clearInterval(follow)
  }
);

您可以尝试使用两个 1000。如果你将第二个移动到 500，那么每一秒，第二个移动都会移动两个移动距离的一半。

我给出了自己的答案，因为我的策略非常不同，而且我的
之前的帖子对于寻求帮助的人来说仍然有效
关于这个话题。