• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 59
  • Last Modified:

JQuery Loop

jQuery loop. I wordpress I have a section that I add logos to.  At anytime there can be any number of logos.  Sometimes more, sometimes less.  I have them fading in and it is all hard coded.  I want to make a loop to cut down on the amount of code and also be more efficient with my coding.  Depending upon how many logos there are, my php loop on the front end makes a number  addition to the ID.  So id="customer1" id="customer2", id="customer3', etc...

My jQuery is the following and I would like to turn it into an intuitive loop.  Any suggestions?
<script>
$('#customer1').addClass('visible');
            setTimeout(function () {
                $('#customer2').addClass('visible');
            }, 100);
            setTimeout(function () {
                $('#customer3').addClass('visible');
            }, 200);
            setTimeout(function () {
                $('#customer4').addClass('visible');
            }, 300);
            setTimeout(function () {
                $('#customer5').addClass('visible');
            }, 400);
            setTimeout(function () {
                $('#customer6').addClass('visible');
            }, 600);
etc.....

Open in new window

0
rgranlund
Asked:
rgranlund
1 Solution
 
Julian HansenCommented:
I would need to see the code but there is a method that works like this

1. Put all the images in a container
2. Hide the images
3. Show the first image
4. Make all images position absolute opacity 0
5. Make the first image position relative
6. Give the first image a transition on the opacity to fade it in
Then create a setInterval function to move the first image to the back every N seconds
CSS
.icon-container {
  width: 200px;
  margin: 0 auto;
  position: relative;
}
.icon-container img {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.icon-container img:first-child {
  opacity: 1;
  transition: 1s opacity;
  position: relative;
}

Open in new window

HTML
  <div class="icon-container">
    <img src="images/foreground1.png" />
    <img src="images/foreground2.png" />
    <img src="images/foreground3.png" />
    <img src="images/foreground4.png" />
    <img src="images/foreground5.png" />
  </div>

Open in new window

JavaScript / jQuery
<script>
$(function() {
  var container = $('.icon-container');
  setInterval(function() {
    $('img:first-child', container).appendTo(container);
  }, 1500);
});
</script>

Open in new window

Working sample here
0
 
leakim971PluritechnicianCommented:
What about :
$('#customer1').addClass('visible');
var i = 1;
var max = 6; // should work if only your section have this ID : $("[id^=customer]").length;
var loopit = function () {
	i++;	
	$('#customer' + i).addClass('visible');
	if(i<=max)
		setTimeout(loopIt, i * 100);
}
setTimeout(loopIt, i * 100);

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now