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？

呢？

为多个元素创建同步动画

2 个答案: