Анимировать два div в одном направлении, один за другим - PullRequest
Новая
       38

Анимировать два div в одном направлении, один за другим

0 голосов
/ 17 января 2012

Я искал это, но лучший ответ, который был дан: «Оберните div вокруг ваших предметов, а затем добавьте анимацию / свиток к этому».Я согласен, это было бы быстрым простым решением моей проблемы, однако я не могу, к сожалению, обернуть div вокруг моего div'а, так как у меня есть конкретная проблема, которая требует от меня анимировать каждый отдельный раздел div.Я уточню ...

У меня есть div под названием 'highlight', в котором есть несколько плиток в два ряда, по 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 'highlight'.Таким образом, теперь у меня есть два div 'highlight', содержащие 10 плиток рядом друг с другом.Затем я могу прокрутить их влево, используя функцию «animate» jquery, чтобы изменить «левое» положение элементов.Однако когда я это делаю, первая панель подсветки скользит быстрее влево, чем следующая панель подсветки рядом с ней.Это означает, что на слайде есть зазор, а не плюшевые рядом друг с другом.Многое, как вы можете сделать, если все ваши плитки контента слайдов предварительно загружены и просто показаны / скрыты вместе со слайдом ....

Итак, мой вопрос, как я могу заставить эти два элемента скользить влево наодно и то же время, одно за другим с той же скоростью?Как я уже говорил, я исследовал, используя функцию animate и изменяя левую позицию, вот так ... 

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

А также попытался изменить параметр leftScroll в функции animate и изменить скорость каждого из них.выделите div, чтобы попытаться замедлить первый, чтобы имитировать анимацию, выглядящую гладко.У кого-нибудь был опыт попытки сделать это?Могу ли я использовать функцию «scrollLeft»?

Любая помощь будет принята с благодарностью!заранее спасибо, ребята!

Крейг

Ответы [ 3 ]

1 голос
/ 17 января 2012

Вы можете использовать гирляндную цепочку, используя функцию задержки. 

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

Обратите внимание, что это миллисекунды ... анимация занимает 30 секунд! :)

«Как я могу заставить эти два div скользить влево в одно и то же время, один за другим с той же скоростью?»

В то же время или после друг друга? это две разные вещи:)

Вот скрипка, так как я не уверен в ваших анимационных намерениях :) http://jsfiddle.net/NZkf8/

0 голосов
/ 18 января 2012

Мне трудно понять, что именно вы ищете ... но возможно, что вы можете достичь этого эффекта "следования", установив интервал, который заставляет второй div анимироваться к местоположениюfirst 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, то каждую секунду второй будет проходить половину расстояния между двумя, когда он начинает двигаться.

Я сделал это своим собственным ответом, потому что моя тактика сильно отличается, и мой предыдущий пост все еще может быть действительным для людей, которые ищут помощь по этой теме.

0 голосов
/ 17 января 2012

Вы можете передать «готовую» функцию в метод animate, который будет вызываться при завершении первого. 

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