jQuery 컨테이너에서 페이드 아웃하고 다음 컨테이너에서 페이드 아웃합니다.

Question

jQuery를 사용하여 페이지와 동일한 효과를 얻는 지 궁금합니다. 고객이 동일한 효과를 원하지만 jQuery에서 (this is actionscript - http://www.shoppingmetropolitanobarra.com.br/site/web/lojas.php).

는 내가 jQuery 코드로 전환하려고했으나 성공하지 :

http://jsfiddle.net/pq667/2/는

는

여러 용기, jQuery를 animate 방법을 사용하여 여러 축소판 각이있을 것, 즉 완료 컨테이너의 fadeOut를 사용한다 효과 및 fadeIn 다음 컨테이너 (로드 할 때 발생합니다).

제안 사항?

Answer 1

와 브라우저를 확인, 내 예를 http://jsfiddle.net/qEAJu/20/에서 보라.

Answer 2

그것은이었다 위해 ...

http://jsfiddle.net/pq667/11/

당신이 물었다 페이드 아웃, 당신은 볼과 같이, 위치와 함께 연주해야하지만이 지연, 페이드를 수행 단순히 다른 지연을 추가하는 경우, 첫 번째 애니메이션을 수행 한 다음 다른 애니메이션을 적용하여 반대의 경우

상대적으로 배치 된 컨테이너 내부에 절대적으로 위치를 지정하고 너비와 높이는 물론 위치 (왼쪽 &)에 애니메이션을 적용합니다.

Answer 3

종종이 스 니펫을 http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/에서 변경합니다. 당신은 이런 일에 위의 무엇을 변화시킬 수

(function hidenext(jq){ 
    jq.eq(0).fadeOut("fast", function(){ 
     (jq=jq.slice(1)).length && hidenext(jq); 
    }); 
})($('div#bodyContent a')); 

temp01 :를 통해 임의의 jQuery 객체 의 셀프 실행 콜백 체인 여기

$('.block').hide(); 

(function showNext(ele){ 
    ele.eq(0).fadeIn('slow', function(){ 
     (ele=ele.slice(1)).length && showNext(ele); 
    }); 
})($('.block'))​ 

는 jsFiddle 내가 당신에게 보여 설정입니다 가능성 : http://jsfiddle.net/hqgVS/

Answer 4

정확한 효과는 CSS3 변환에서만 가능합니다. 이유는 텍스트의 크기 조정입니다. 물론 요소의 크기와 글꼴을 변경하여 가짜로 만들 수는 있지만 원하는 효과를 얻는 것은 매우 어려울 것입니다.

jQuery를 :

$('li').each(function(i, el) { 
    setTimeout(function() { 
     $(el).addClass('show'); 
    }, ($('li').length - i) * 500); 
});​ 

CSS :

li.show{ 
    -webkit-transition:all 1s ease-out; 
    opacity:1; 
    -webkit-transform:scale(1); 
} 

데모 : http://jsfiddle.net/6xL7R/
,536 예를 들어

당신은 비록 jQuery를 함께 불투명도 애니메이션을 할 수

---

(내가 생략하기 때문에 크롬 같은 웹킷 브라우저에서보기, 다른 공급 업체 접두사) :

jQuery를 :

$('li').css({'opacity':0}).each(function(i,el){ 
    $(el).delay(($('li').length-i)*500).animate({'opacity':1},1000); 
}); 

(내 바이올린에 주석이 달린 부분)

어쩌면이 둘의 조합이 효과가 있을까요? 호환되는 브라우저에서 눈금 표시. 당신이 효과를 확대하는 CSS 전환에 대한 this plugin를 사용하여 고려하는 것이 달성하려면

또는 http://modernizr.com/