jQuery显示块和fadeIn

Question

I'm trying to create a very basic tab system in which tab should appear as fadeIn effect.

In the following code, .field is set to display:none with css. The code would display the tabs correctly, however it just does not show the fadeIn effect.

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;
}

Demo:

http://jsfiddle.net/ReyBd/

Answer 1

Can't you use hide and fadeIn only? is active class really needed?

Check this jsfiddle

Answer 2

When you add the class active, it displays as block immediately because of you css rule and therefore, it can't fade in.

You don't need to add/remove the classes at all, because the fadeIn() method in jQuery automatically handles this for you, by applying an inline style for opacity and display: block, so it overrides your css.

Also, you can use the fadeToggle method, which checks the state of the element and toggles it.

So, just do this instead (make sure to leave the first css rule .field {display:none;} ):

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

Answer 3

I tweaked some items positioning using absolute so that the tabbed items fade over each other (rather than stacking like the default behavior is).

Also, active class is unnecessary for what you are trying to do, but if you need active class for something else that you will be adding later, I left it in.

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; }