Question

我在使用jQuery UI switchClass方法时遇到了很大的困难，所以我现在确信我需要使用.animate，但是，我有13个位置要动画。所以我需要将以下CSS类规则转换为我可以在.animate函数中使用的数组，如下所示：

$(".candidate").each(function(index) { 
    $(this).animate({myCSSarray[index], 'slow'});
});

如何使用以下CSS规则执行此操作？其中.can不重要，但后面的数字应该是数组键（索引），以便它在每个循环中抓取正确的index。

.can0 {
    margin-top: 0;
    margin-left: 66%;
    opacity: 0.8;
    width: 35% !important;
    z-index: 10;
}

.can1 {
    margin-left: 30%;
    width: 40% !important;
    z-index: 11;
    opacity: 1;
    margin-top: 1em;         
}

.can2 {
    margin-left: 0;
    width: 35% !important;
    z-index: 10;
    opacity: 0.8;
    margin-top: 0;
}

.can3 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 3%;
    z-index: 9;
}

.can4 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 20%;
    z-index: 8;
}

.can5 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 33%;
    z-index: 7;
}

.can6 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 43%;
    z-index: 6;
}

.can7 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 52%;
    z-index: 5;
}

.can8 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 61%;
    z-index: 5;
}

.can9 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -13%;
    margin-left: 70%;
    z-index: 6;
}

.can10 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 79%;
    z-index: 7;
}

.can11 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 89%;
    z-index: 8;
}

.can12 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 98%;
    z-index: 9;
}

我想做的是：

我在一个页面上有13个div，每个div都有一个类candidate，用于定义页面之外的位置（在右侧），绝对定位。现在，当页面加载时，我需要根据索引将每个元素从can0动画到can12。

所以，第一次它在.each内循环时，它应该为can0动画，下一个循环，会给我一个索引1，并且应该将类can0的元素更改为{{1使用动画将can1类添加到can0元素。 $(this)中的下一个循环将为索引返回2，现在应该将.each设置为can1，将can2设为can0，并添加一个类{ {1}}带有动画的元素。 can1方法中的下一个循环现在将返回索引3，现在应该使用动画将can0类更改为.each，将can2设置为can3 }，将can1设置为can2，然后使用动画将类can0添加到该元素。这需要继续，直到所有13个div都被放置并且不再剩下。

我尝试使用jQuery UI的can1方法一次在类1之间切换，但这是非常不稳定的动画并且看起来很糟糕，有时甚至无法切换类，如下所示：{ {3}}所以，我认为直接使用can0是唯一顺利可靠的方法。

这是一个jsfiddle，但根本没有动画：http://opportunityfinance.net/Test/newest_conference-2013/meetcandidates.html它需要从右边进来，每个元素应该从can0变为can1到can2 ......等等，一直到can12，但这根本不起作用。我甚至为你标记了元素，因此你可以看到每个.switchClass类是如何定义的。当然，这个jsfiddle是所有动画完成后END RESULT的一个例子，但我正在努力研究动画，因为jQuery UI .animate SUCKS和jQuery无论如何都没有动画类之间的动画，这就是为什么我要求所有类定义的JS数组根据需要放入can方法。

Answer 1

尝试这样的事情......

$(".candidate").each(function(index) { 
    $(this).animate(function(){
       $(this).addClass('can'+index);
    }, 'slow');
});

Answer 2

我在这里设置了工作示例see

<强> HTML

<div class="candidate"> s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>

<强> CSS **

.can0 {
    margin-top: 0;
    margin-left: 66%;
    opacity: 0.8;
    width: 35% !important;
    z-index: 10;
}
.can1 {
    margin-left: 30%;
    width: 40% !important;
    z-index: 11;
    opacity: 1;
    margin-top: 1em;         
}
.can2 {
    margin-left: 0;
    width: 35% !important;
    z-index: 10;
    opacity: 0.8;
    margin-top: 0;
}
.can3 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 3%;
    z-index: 9;
}
.can4 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 20%;
    z-index: 8;
}
.can5 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 33%;
    z-index: 7;
}
.can6 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 43%;
    z-index: 6;
}
.can7 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 52%;
    z-index: 5;
}
.can8 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 61%;
    z-index: 5;
}
.can9 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -13%;
    margin-left: 70%;
    z-index: 6;
}
.can10 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 79%;
    z-index: 7;
}
.can11 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 89%;
    z-index: 8;
}
.can12 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 98%;
    z-index: 9;
}

<强> JS

$(".candidate").each(function(index) { 
    $(this).animate( 'slow', function() {
        $(this).addClass("can"+index);
    console.log("index");
  });
});

参考animate

构建一个与.animate（）一起使用的数组

2 个答案: