Question

我试图创建一个非常基本的标签系统，其中标签应显示为淡入效果。

在以下代码中，使用css将.field设置为display:none。代码会正确显示标签，但它不会显示fadeIn效果。

HTML：

<div class="block">
    <div class="controls">
        <a class="one" href="#">First</a>
        <a class="two" href="#">Second</a>
    </div>
    <div class="field field-one active">Field 1</div>
    <div class="field field-two">Field 2</div>
</div>

jQuery的：

$('.controls .one').click(function(){
        $('.field').removeClass('active');
        $('.field-one').addClass('active').fadeIn();
});

$('.controls .two').click(function(){
        $('.field').removeClass('active');
        $('.field-two').addClass('active').fadeIn();
});

CSS：

.field{
    display: none;
}

.field.active{
    display: block;
}

演示：

http://jsfiddle.net/ReyBd/

Answer 1

您不能仅使用hide和fadeIn吗？是否真的需要活跃课程？

选中此jsfiddle

Answer 2

当您将类添加为活动时，由于您的css规则，它会立即显示为块，因此它无法淡入。

你根本不需要添加/删除类，因为jQuery中的fadeIn（）方法会自动为你处理这个，通过为不透明度和display：block应用内联样式，所以它会覆盖你的css

此外，您可以使用fadeToggle方法，该方法检查元素的状态并切换它。

所以，请改为执行此操作（确保保留第一个css规则.field {display:none;}）：

$('.controls .one').click(function(){
     $('.field').fadeToggle();
});

Answer 3

我调整了一些使用绝对定位的项目，以便标签项相互淡化（而不是像默认行为一样堆叠）。

此外，您正在尝试执行的操作不需要活动类，但如果您需要活动类以便稍后添加其他内容，我会将其保留。

<强>使用Javascript：

$('.field').removeClass('active').hide();
$('.field-one').addClass('active').show();

$('.controls .one').click(function(){
        $('.field').removeClass('active').fadeOut();
        $('.field-one').addClass('active').fadeIn();
});

$('.controls .two').click(function(){
        $('.field').removeClass('active').fadeOut();
        $('.field-two').addClass('active').fadeIn();
});

<强> HTML：

 <div class="block">
        <div class="controls">
            <a class="one" href="#">First</a>
            <a class="two" href="#">Second</a>
        </div>
        <div class="container">
        <div class="field field-one active">Field 1</div>
        <div class="field field-two">Field 2</div>
        </div>
    </div>

<强> CSS：

.field{ width: 100px;
    height: 100px;
    background: green;
    position: absolute;
    top: 0;
    left: 0; }

.container { position: relative; }

.field.active{  }

.field-two{ background: yellow; }

jQuery显示块和淡入淡出

3 个答案: