Question

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

我有一个名为'highlight'的div，它有两行中的一些瓷砖，每行有5个瓷砖，形成一个网格。这就是我所说的'Ribbon'，它是我页面底部的一个面板，它有一个容器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个图块。然后将它们作为新的'highlight'div附加到我的容器div中的内容中。这意味着，我现在有两个'高亮'div，包含10个相邻的瓷砖。然后我可以使用jquery'animate'函数将这两个向左滚动到左边，以改变元素的'left'位置。但是，当我这样做时，第一个高亮显示面板向左滑动的速度比旁边的下一个高亮显示面板快。意味着幻灯片中存在间隙，而不是相互滑动毛绒。如果所有幻灯片内容图块都已预先加载并且只是用幻灯片显示/隐藏，那么你怎么办？

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

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

并且还试图在animate函数中更改leftScroll参数，并改变每个高亮div的速度以尝试减慢第一个以使动画看起来光滑。有人有尝试这样做的经验吗？我可以使用'scrollLeft'功能吗？

这里非常感谢任何帮助！先谢谢你们！

克雷格

Answer 1

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

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

请注意，它是毫秒......你制作动画需要30秒！：）

＆＃34;我怎样才能让这两个div同时向左滑动，一个以相同的速度直接滑到另一个？＆＃34;

同时还是在彼此之后？这些是两件不同的事情：）

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

Answer 2

您可以将'finished'函数传递给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，那么每秒，第二个将移动它开始移动的两个距离的一半。

我做出了这个答案，因为我的策略非常不同，而且我的以前的帖子仍然适用于寻求帮助的人关于这个话题。

以相同的方向动画两个div，一个接一个

3 个答案: