为多个元素创建同步动画

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>​

好的，所以假设的 的大小总是不同的，在本例中，这意味着元素的宽度也会不同。

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

我让它们消失的方法是将它们的宽度设置为 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;   
    }); 
});

Answer 2

首先

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

应该是

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

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

我认为您错过了动画的持续时间。

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

此外 .item 似乎是多余的，因此：

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

更新：

所以回到您的问题：

“那么，我的“真正的”问题是：有没有一种方法可以同步迭代 jQuery 数组并为属性设置动画 - 或者类似的东西。”

您需要迭代它们吗？

这不行吗？

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

那么使用 slideUp 和 slideDown 或 slideToggle 怎么样？