Javascript jQuery循环中div的不同CSS

我想在循环中进行jQuery淡入淡出，例如

但是我想为每个.trip元素保持不同的css定位，即元素淡入淡出

例如，对于元素

Item3

，我想添加定位，以便在淡入时显示left 200px，例如在这个css中：

#3{position:absolute; left:200px;}

还有一个元素

#2{position:absolute; left:100px;top:100px;}

使用JSFIDLE中的当前代码，元素将加载到页面上的同一位置

我试着像上面那样将css添加到不同的元素中，但它仍然在JSFIDLE中的相同位置加载

---

如何修复此问题？

您不能在CSS中以数字开始id

HTML

---

您可以为每个ID提供边距

CSS:

HTML:

<div id="main">
   <div id="one" class="trip">Item1</div>
   <div id="two" class="trip">Item2</div>
   <div id="three" class="trip">Item3</div>
</div>

项目1
项目2
项目3

---

或者您可以动态地为他们提供边距，例如：

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.css( { marginLeft :( (i+1) * 100)+ "px", marginRight :((i+1) * 100) + "px" } );
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

---

正如其他人所说，不要以数字开始ID。这是无效的

但是，如果您必须这样做（可能不是您的HTML），您可以向他们提供如下CSS规则：

[id='2'] { margin-left:200px; }
[id='3'] { margin-left:400px; }

---

但是，如果可以的话，再次修复ID名称。您将有更少的问题。

IDs不能以数字开头，仅供参考。他是正确的，如果您添加CSS并将ID更改为div1 div2和div3，则效果很好。我使用数字格式的ID在jquery循环中计数。但我将其添加为class=“trip one”等，并将css用作.trip.one，现在它可以很好地工作：HTML5说你可以用一个数字开始ID：D@tymeJV以数字开头的ID在HTML5中完全有效。问题是，CSS选择器无法正常工作…：）

<div id="main">
   <div id="one" class="trip">Item1</div>
   <div id="two" class="trip">Item2</div>
   <div id="three" class="trip">Item3</div>
</div>

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.css( { marginLeft :( (i+1) * 100)+ "px", marginRight :((i+1) * 100) + "px" } );
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

[id='2'] { margin-left:200px; }
[id='3'] { margin-left:400px; }