0

我对 jQuery 编程比较陌生，所以请耐心等待。

我正在尝试缓存我在 js 文件底部的列表，以便页面运行更流畅。

我要去的清单是这样的：

$(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);
}

我想设置一个 for 循环，这样不仅“#rim”和“#shadow”得到递增的数字，而且它们的速度也递增 100。

我尝试构建的内容类似于：

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

当然，这还远远没有结束。我只是不确定我应该如何设置这个多方面的命令。我背后的理论是，也许我可以使用包装器将它们组合起来，用于所有不同的语句。在 html 中，它们看起来像：

<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>

任何帮助将不胜感激！

4

1 回答 1

0

试试这个，

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

类似的shadow

于 2012-08-29T16:39:20.690 回答