여러 요소에 대한 동기 애니메이션 만들기

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-->의 크기는 항상 다른 어느 -이 경우에는 - 의미의도 폭 요소가 달라집니다.

그래서 내가해야 할 일은 어떻게 든 클래스별로 콘텐츠를 "필터링"하는 것입니다. 본질적으로 나는 그들을 사라지게하고 필터가 선택되었을 때 다시 나타나게 할 필요가있다.

는

내가 그들을 사라지게 할 방법은 jQuery의 .animate() 사용하여이 모든 전환 방식 일 0 —, 자신의 0px에 폭과 불투명도를 설정하는 것입니다.

순간 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 배열을 반복 할 수있는 방법이 있나요 및 속성 – 또는 그 선을 따라 무언가를 움직이십시오.

감사합니다. 모든

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

의

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() { 
    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 사용에 대한 ?