Geek asks and answers

FadeIn after FadeOut

I cannot understand why my div will not fade after the completion of FadeOut.

Here is my html:

<div class="header-container">
    <header class="wrapper clearfix">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#tab1">Section 1</a>
            </li>
            <li>
                <a href="#tab2">Section 2</a>
            </li>
        </ul>
    </header>
</div>

<div class="main-container">
    <div class="main wrapper clearfix">

        <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <p>I'm in Section 1.</p>
                </div>
                <div class="tab-pane" id="tab2">
                    <p>Howdy, I'm in Section 2.</p>
                </div>
        </div>

    </div> <!-- #main -->
</div> <!-- #main-container -->

My js

jQuery(document).ready(function(){
    $('.nav-tabs a').click(function (e) {
      e.preventDefault();
      var href = $(this).attr('href'); // Select first tab
        $('.tab-pane').fadeOut(1000,function(){
            $(href).fadeIn(1000);
        });
    });

});

My css

.tab-pane {
    display: none;
}

I did jsfiddle:

http://jsfiddle.net/JohnnyDevv/hKq2K/1/

I made it as simple as possible ... Thanks in advance

+5
source share
3 answers

This will produce the expected expected result:

 $('.tab-pane').fadeOut(1000).promise().done(function(){
     $(href).fadeIn(1000);
 });

.promise()provides completion fadeOut()first and then when it completes execution .done().

DEMO FIDDLE

+19
source

You use the generic class name .tab-pane to animate the fade, which seems to be the problem, try using the “active” class that you have

Try this js

$('.nav-tabs a').click(function (e) {
     e.preventDefault();
     var href = $(this).attr('href'); // Select first tab
     // select the active tab then remove the active class name then do the fade out
     $('.tab-pane.active').removeClass("active").fadeOut('slow',function(){
          $(href).addClass("active").fadeIn(1000);
     });
});

JS Fiddle: http://jsfiddle.net/hKq2K/2/

+1
source

Custom Hook Usage: Jai

If you want it to not work if the contents of the tab is already open, use:

. not ()

$('.nav-tabs a').click(function (e) {
      e.preventDefault();
      var href = $(this).attr('href'); // Select first tab
        $('.tab-pane').not(href).fadeOut(1000).promise().done(function(){
            $(href).fadeIn(1000);
        });
    });

Demo jsfiddle

Sorry, my English, I'm from a different nationality. =]

+1
source

More articles:


All Articles