0

我在使用 jQuery UIswitchClass方法时遇到了很大的困难，所以我现在确信我需要使用.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为can1并动画化，然后将can0类添加到$(this)元素，带有动画。下一个循环.each将返回 2 作为索引，现在应该动画can1到can2，动画can0到，并使用动画向该元素can1添加一个类。can0方法中的下一个循环.each，现在将返回索引 3，它现在应该将can2类更改为can3带有动画、动画can1到can2、动画can0到can1，然后添加类can0到带有动画的那个元素。这需要继续，直到所有 13 个 div 都已放置并且没有剩余。

我曾尝试使用 jQuery UI 的方法一次在类 1 之间切换.switchClass，但这是非常不稳定的动画，看起来很糟糕，有时甚至不切换类，如您在此处看到的： http ://opportunityfinance.net/Test /newest_conference-2013/meetcandidates.html 所以，我相信.animate直接使用是唯一流畅可靠的方法。

这是一个jsfiddle，但根本没有动画：http: //jsfiddle.net/2Hpjf/6/ 它需要从右边进来，每个元素应该从can0变为can1再到can2......等等，所有直到can12，但这根本不起作用。我什至为你标记了元素，所以你可以看到每个can类是如何定义的。当然，这个 jsfiddle 是所有动画完成后 END RESULT 的一个例子，但我在动画方面很挣扎，因为 jQuery UI .switchClassSUCKS 和 jQuery 无论如何都没有在类之间制作动画，这就是我要求 JS 的原因根据需要放入.animate方法中的所有类定义的数组。

4

2 回答 2

1

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

$(".candidate").each(function(index) { 
    $(this).animate(function(){
       $(this).addClass('can'+index);
    }, 'slow');
});
于 2013-08-14T06:56:51.727 回答
0

我在这里设置了 vworking 示例，请参阅

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");
  });
});

参考动画

于 2013-08-14T07:01:22.600 回答