전환 가능한 div를 페이드 인하려면 어떻게합니까?

Question

링크를 클릭 할 수있는 작은 시스템이 있고 div가 사라지고 링크를 다시 클릭하면 div가 희미 해집니다. 3 개의 div가 나타날 때까지. 이 코드는 잘 작동하지만 궁금한 점은 각 코드를 클릭 할 때마다 페이드 인하는 것뿐입니다. 여기 내 코드가있다.

CSS

.box { 
background-color: #036; 
height: 190px; 
width: 100px; 
margin-top: 10px; 
} 

HTML

<div class="News" style="display:none;"> 
<div class="box" id="news4"></div> 
</div> 

<div class="News" style="display:none;"> 
<div class="box" id="news5"></div> 
</div> 

<span><a href="#" id="add">More news</a></span> 

JQUERY 정말 간단

$('#add').click(function() { 
$('.News').each(function() { 
    if ($(this).css('display') == 'none') { 
     $(this).css('display', 'block'); 
     return false; 
    } 
}); 
var i = 0; 
$('.News').each(function() { 
    if ($(this).css('display') != 'none') { 
     i++; 
    } 
}); 

if (i == 3) $('#add').show(); 
}); 

Answer 1

. 이 CSS 스타일이 위치로 설정되어 있으면 #add를 누르면 내 통화 기능이 설정되고 아무 것도 표시되지 않으면 블록이 표시됩니다. 기능을 변경하지 않고 아무 것도 선택하지 않고 페이드 인으로 변경해야합니다. 여기에 수정 된 코드가 있습니다.

if ($(this).css('display') == 'none') { 
$(this).fadeIn("slow"); 

는

한숨 ... 내 자신의 질문에 대답

전

if ($(this).css('display') == 'none') { 
$(this).css('display', 'block'); 

후에