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>

Jクエリ

$('#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();
});