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样式设置为position，将其从none更改为显示块，则在按下#add时我的调用函数也会被设置。你只需要将函数从无变化更改为淡入淡出。这是修改后的代码。

在

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

在

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

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

如何使我的切换div淡入？

1 个答案: