CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1117313
user1117313

Reputation: 1985

jQuery display block and fadeIn

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/

Upvotes: 0

Views: 1511

Answers (3)

JRulle
JRulle

Reputation: 7568

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

Upvotes: 1

jme11
jme11

Reputation: 17397

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

Upvotes: 2

Dexa
Dexa

Reputation: 1651

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

Check this jsfiddle

Upvotes: 3

Related Questions