HTML CSS JQuery 페이딩/출현 컨텐트

Question

페이드 효과를 사용하여 내용을 서로 바꿔 넣을 수있는 특정 부분이 있습니다. 그래서 컨텐트 섹션에 대한 컨테이너 속성을 정의 할 수 있다고 가정합니다. 그런 다음 스왑 핑 및 인서트 될 3 개의 div 컨테이너 각각을 정의 할 수 있습니다. 이를 염두에두고 두 컨테이너를 숨기고 한 번에 하나씩 만 표시하도록 코드를 작성합니다 (페이드 효과 포함). 이주기는 영원히 반복 될 것입니다.

Answer 1

jQuery Cycle plugin을 살펴보세요. 대부분의 질문에 해당하는 것으로 보입니다.

Answer 2

의는 다음과 같은 HTML을 jQuery를 사용하는 가정 해 봅시다 :

$("div.container > div").not('[name="2"]').fadeOut(); 
$('div.container > div[name="2"]').fadeIn(); 

: 페이드 인 것 2라는 이름의 사업부를 제외하고 모든 것을 페이드 아웃 그런 다음이 트릭을 할 것

<div class="container"><div name="1" /><div name="2" /><div name="somethingelse" /></div> 

div를 페이드 인 (fade in)으로 지정하는 매개 변수를 취하는 함수를 쉽게 만들 수 있습니다. 다른 모든 변수는 페이드 아웃됩니다.

Answer 3

영원히 순환 시키려면 약간의 돔 조작을 통해 트릭을 수행 할 수 있습니다.

http://jsfiddle.net/S4UYA/

<div id="container"> 
    <div class="content">content 1</div> 
    <div class="content">content 2</div> 
    <div class="content">content 3</div> 
</div> 

$("#container .content").not(":first").hide(); 

(function fadeItems(){ 
    $("#container .content:first").delay(1000).fadeTo(1000,0,function(){ 
     $(this).insertAfter("#container .content:last"); 
     $("#container .content:first").fadeTo(1000,1,function(){ 
      fadeItems(); 
     }); 
    }); 
})();