Создание синхронной анимации для нескольких элементов

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 и анимировать атрибуты & ndash; или что-то в этом роде.

Спасибо!

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?