javascript - 为多个元素创建同步动画

Question

我试图在标题中尽可能详细，但最终还是含糊不清。所以，我将在这里详细说明:

我有以下 HTML:

​<span class="item c1"><!--content--></span>
<span class="item c2"><!--content--></span>
<span class="item c3 c2"><!--content--></span>
<span class="item c1"><!--content--></span>
<span class="item c1 c4"><!--content--></span>​

好的，那么假设的大小 <!--content-->总是不同的，在这种情况下，这意味着元素的宽度也会不同。

所以，我需要做的是以某种方式“过滤”他们的类的内容。本质上，我需要让它们消失并在选择过滤器时重新出现。

我让它们消失的方法是将它们的宽度设置为 0px不透明度为 0 —这一切都是过渡性的，使用 jQuery 的 .animate() .

DOM 加载的那一刻，我将它们的“原始”宽度保存到 data-*属性:

jQuery(function(){

    jQuery('.item').each(function(i, e) {
        var $e = jQuery(e);
        $e.data( 'origWidth', $e.css('width') );
    });

});

现在，当它们再次显示(或重新过滤，如果你愿意的话)时，它们都具有相同的宽度(我知道为什么，但我不知道解决它的方法):

jQuery('.c'+id+'.item').stop().animate({
    'width' : jQuery('.c'+id+'.item').data('origWidth'), 
    'opacity' : 1
});
//NOTE: the [id] in the above snippet is passed by a 
//function and is the category id.

所以，我的“真正”问题是:是否有一种方法可以同步遍历 jQuery 数组并为属性设置动画——或者类似的东西。

谢谢!

Answer 1

好吧，就几句话.. 你没有记住每个元素的宽度。 jQuery 的动画可以为您完成。简单示例:http://jsfiddle.net/AkJAm/3/

<span class='item'>Some content</span>
<span class='item'>Another content</span>
<span class='item'>And so on</span>

<br />
<a href='#' id='animate'>Click me</a>

以及js代码:

$(document).ready(function(){
    $('#animate').click(function(){
        $('.item').animate({width: 'toggle', opacity: 'toggle'});
        return false;   
    }); 
});