html - 如何让我的可切换 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>

查询

$('#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).css('display', 'block');

后

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

回答了我自己的问题...叹息