Question

I’m rather new to programming in jQuery, so bear with me.

I’m trying to cache a list I have going at the bottom of my js file so that the page runs smoother.

The list I have going looks like so:

$(document).ready(function () {

  hover($('#rim-1'), 900); 
  hover($('#rim-2'), 800); 
  hover($('#rim-3'), 1000); 
  hover($('#rim-4'), 900); 
  hover($('#rim-5'), 800); 
  hover($('#rim-6'), 1000); 
  hover($('#rim-7'), 900); 
  hover($('#rim-8'), 800); 
  hover($('#rim-9'), 1000); 
  hover($('#rim-10'), 900); 
  hover($('#rim-11'), 800); 
  hover($('#rim-12'), 1000); 
  shadow($('#shadow-1'), 900); 
  shadow($('#shadow-2'), 800); 
  shadow($('#shadow-3'), 1000); 
  shadow($('#shadow-4'), 900); 
  shadow($('#shadow-5'), 800); 
  shadow($('#shadow-6'), 1000);
  shadow($('#shadow-7'), 900); 
  shadow($('#shadow-8'), 800); 
  shadow($('#shadow-9'), 1000); 
  shadow($('#shadow-10'), 900); 
  shadow($('#shadow-11'), 800); 
  shadow($('#shadow-12'), 1000);
}

I want to set a for loop so that not only the “#rim” and “#shadow” get incrementing numbers, but also their speeds are incremented by 100.

What I have attempted to build looks something like:

var hover = $("#floating-rim-container").find(".floating-rim-wrapper");
for (i=0; i<6; i++) {
    var speed = speed + 100;
}

Of course, that’s far from finished. I’m just not sure how I’m supposed to set-up this multi-faceted command. My theory behind this is that maybe I could combine them using a wrapper for all of the different statements. In html, they look like:

<div id="floating-rim-container">

            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-7">
            </a>        
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-8">
            </a>        
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-9">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-10">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-11">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-12">
            </a>
                <div id="shadow-container">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                </div>
            </div>

Any help would be massively appreciated!

Answer 1

Try this,

var i=900;
$("#floating-rim-container").find(".floating-rim-wrapper").each(function(){
  hover($(this),i);
  i=i+100;
});

Similar for shadow