为多个元素创建同步动画

I tried to be as detailed as general in the title, but it ended up vague anyway. So, I will elaborate here:

我试图在标题中像一般一样详细，但无论如何它最终都含糊不清。所以，我将在这里详细说明：

I have the following HTML:

我有以下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>

Okay, so the size of the hypothetical  is always different, which - in this case - means that also the width of the elements will be different.

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

So, what I need to do is somehow "filter" the content by their classes. Essentially I need to make them disappear and re-appear when the filter is selected.

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

The way I make them disappear is to set their width to 0px and the opacity to 0—this all happens transitionally, using jQuery's .animate().

我让它们消失的方法是将它们的宽度设置为0px，将不透明度设置为0 - 这一切都是使用jQuery的.animate（）过渡发生的。

The moment the DOM loads, I save their "original" widths to a data-* attribute:

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

jQuery(function(){

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

});

Now, when they're being displayed again (or re-filtered, if you will) they all get the same width (I know why, but I don't know a way around it):

现在，当他们再次显示（或重新过滤，如果你愿意）他们都得到相同的宽度（我知道为什么，但我不知道解决方法）：

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.

So, what my "real" questions is: Is there a way to synchronously iterate through a jQuery array and animate the attributes – or something along those lines.

那么，我的“真实”问题是：有没有办法同步迭代jQuery数组并为属性设置动画 - 或者沿着这些行添加某些东西。

Thank you!

谢谢！

2 个解决方案

#1

Ok, just a couple of words.. You do not have remember the width of each element. jQuery's animation can do it for you. Simple example: http://jsfiddle.net/AkJAm/3/

好的，只是几个单词..你不记得每个元素的宽度。 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>

And js code:

和js代码：

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

#2

First of all

首先

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

should be

应该

jQuery('.item').each(function() {
    jQuery(this).data( 'origWidth', jQuery(this).width() );
});

What action causes them to re-appear or being filtered?

什么操作导致他们重新出现或被过滤？

I think you are missing the duration of the animation..

我想你错过了动画的持续时间..

jQuery('.c-'+id+'.item').stop().animate({
    'width' : jQuery('.c'+id+'.item').data('origWidth'), 
    'opacity' : 1
}, 1000);

Also .item seems redundant, so:

另外.item似乎多余，所以：

jQuery('.c-' + id).stop().animate({
    'width' : jQuery('.c' + id).data('origWidth'), 
    'opacity' : 1
}, 1000);

Update:

更新：

So back to your question:

回到你的问题：

"So, what my "real" questions is: Is there a way to synchronously iterate through a jQuery array and animate the attributes – or something along those lines."

“那么，我的”真实“问题是：有没有办法同步迭代jQuery数组并为这些属性设置动画 - 或者沿着这些线条。”

Do you need to iterate through them?

你需要迭代它们吗？

Does this not work?

这不起作用吗？

jQuery('.c-' + id).stop().animate({
    'width' : 'toggle', // courtesy of @Cheery
    'opacity' : 1
});

And what about using slideUp and slideDown or slideToggle?

那么使用slideUp和slideDown或slideToggle呢？

#1