How do you run a function on multiple divs at the same time?

Question

How do you run a function (animation in this case. Optionally using jquery) on multiple divs at the same time?

Started with http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

Trying to extend it so that the animation plays simultaneously on the divs on the left and right of the center div. Changed from an id to class but it plays on one div, then the other. Want it playing on both at the same time.

$(window).load(function() { //start after HTML, images have loaded

  var InfiniteRotator = {
    init: function() {
      //initial fade-in time (in milliseconds)
      var initialFadeIn = 1000;

      //interval between items (in milliseconds)
      var itemInterval = 5000;

      //cross-fade time (in milliseconds)
      var fadeTime = 2500;

      //count number of items
      var numberOfItems = $('.rotating-item').length;

      //set current item
      var currentItem = 0;

      //show first item
      $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

      //loop through the items  
      var infiniteLoop = setInterval(function() {
        $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

        if (currentItem == numberOfItems - 1) {
          currentItem = 0;
        } else {
          currentItem++;
        }
        $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

      }, itemInterval);
    }
  };

  InfiniteRotator.init();

});

.rotating-item-wrapper {
  position: relative;
  width: 320px;
  height: 240px;
  /* background-color: red; */
}

.rotating-item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<body>
  <div class="centered-content row">
    <div class="column rotating-item-wrapper">
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-1.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-2.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-3.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-6.jpg" class="rotating-item" width="320" height="240"/>
    </div>
    <div class="column">
      Texty stuff
    </div>
    <div class="column rotating-item-wrapper">
      <img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
      <img src="https://www.ford.com/campaignlibs/content/dam/ford_com/en_us/gtreveal/doc_part_2_1.jpg" class="rotating-item" width="320" height="240"/>
      <img src="https://2.bp.blogspot.com/-OSLF3ue4tbc/Vczt0IPTHHI/AAAAAAAAG-0/zdQ82j3gQPU/s1600/Forza-Motorsport-6-Ford.jpg" class="rotating-item" width="320" height="240"/>
      <img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
    </div>
  </div>
</body>

Possible duplicate of [this](http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously) SO question. — Jeroen Heier, May 17 '17 at 03:58
Is asking for same solution (animation across multiple divs) but approach is different (doesn't use multiple ids) so is hopefully useful as alternate way of solving problem. I prefer this solution...because it uses my code :) and is more flexible. — kalmdown, May 18 '17 at 15:56

score 2 · Answer 1 · answered May 17 '17 at 03:52

Pass $(".rotating-item-wrapper") to .init() at .each(), use .find() with parameter ".rotating-item" within .init() to reference .rotating-item elements within each parent .rotating-item-wrapper element.

Also, substitute $(function(){}) for $(window).load()

$(function() { //start after HTML, images have loaded

  var InfiniteRotator = {
    init: function(el) {
      //initial fade-in time (in milliseconds)
      var initialFadeIn = 1000;

      //interval between items (in milliseconds)
      var itemInterval = 5000;

      //cross-fade time (in milliseconds)
      var fadeTime = 2500;

      //count number of items
      var numberOfItems = $('.rotating-item').length;

      //set current item
      var currentItem = 0;

      //show first item
      el.find('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

      //loop through the items  
      var infiniteLoop = setInterval(function() {
        el.find('.rotating-item').eq(currentItem).fadeOut(fadeTime);

        if (currentItem == numberOfItems - 1) {
          currentItem = 0;
        } else {
          currentItem++;
        }
        el.find('.rotating-item').eq(currentItem).fadeIn(fadeTime);

      }, itemInterval);
    }
  };

  $(".rotating-item-wrapper").each(function() {
    InfiniteRotator.init($(this))
  });

});

.rotating-item-wrapper {
  position: relative;
  width: 320px;
  height: 240px;
  /* background-color: red; */
}

.rotating-item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<body>
  <div class="centered-content row">
    <div class="column rotating-item-wrapper">
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-1.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-2.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-3.jpg" class="rotating-item" width="320" height="240"/>
      <img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-6.jpg" class="rotating-item" width="320" height="240"/>
    </div>
    <div class="column">
      Texty stuff
    </div>
    <div class="column rotating-item-wrapper">
      <img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
      <img src="https://www.ford.com/campaignlibs/content/dam/ford_com/en_us/gtreveal/doc_part_2_1.jpg" class="rotating-item" width="320" height="240"/>
      <img src="https://2.bp.blogspot.com/-OSLF3ue4tbc/Vczt0IPTHHI/AAAAAAAAG-0/zdQ82j3gQPU/s1600/Forza-Motorsport-6-Ford.jpg" class="rotating-item" width="320" height="240"/>
      <img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
    </div>
  </div>
</body>

Thanks! Appreciate the solutions flexibility. - K – kalmdown May 18 '17 at 15:58 — kalmdown, May 18 '17 at 15:58

How do you run a function on multiple divs at the same time?

1 Answers1