Question

这样的循环中淡入jQuery并淡出

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

例如，对于元素<div id="3" class="trip">Item3</div>，我想添加定位，以便在淡入时显示左侧200px，例如在此css中：

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

和另一个元素

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

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

我尝试将css添加到不同的元素中，就像我上面所做的那样，但它仍然加载到与jsfiddle相同的位置。

我该如何解决这个问题？

Answer 1

您无法使用CSS中的数字启动ID。 Try this

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>

CSS

#two{position:absolute; left:100px;top:100px;}    
#three{position:absolute; left:200px;}

Answer 2

您可以为每个ID提供保证金

CSS：

#a2 { margin-left: 200px; }
#a3 { margin-left: 400px; }

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>

<强> DEMO Here

Answer 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++;
    })
}

Answer 4

正如其他人所说，不要用数字开始身份证。它无效。

但是，如果绝对必须（也许它不是你的HTML），你可以给他们这样的CSS规则：

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

但是，如果可以的话，再次修复ID名称。你的问题会少一些。

jQuery循环中div的不同CSS

4 个答案: