淡出后淡入

Question

我想不通为什么我的div在淡出完成后无法淡入。

这是我的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 -->

我的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);
        });
    });

});

我的CSS

.tab-pane {
    display: none;
}

我制作了一个jsfiddle：

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

我尽可能地让它简单易懂...提前致谢。

- JonnyDevv

---

可以，还有其他问题吗？ - hjpotter92

你正在使用哪个浏览器？我无法在你的 jsFiddle 中复制这个问题。 - Curtis

这对我也有效。你应该使用 console.log() 输出此行代码：var href = $(this).attr('href'); 并检查你是否得到了正确的值。 - Bill

我遇到了一个问题，IE7返回的是绝对路径而不仅仅是锚点。正如其他人所说，你在测试哪个浏览器？IE7问题：IE7 .attr() bug 参考链接：http://bugs.jquery.com/ticket/11129，https://dev59.com/2nI-5IYBdhLWcg3w9thw - isotrope

我正在使用Chrome，从未遇到过这个问题。除了jquery.1.9.1.min和modernizer之外，没有使用任何JavaScript脚本，因此class tab-pane不可能是问题所在。我的CSS中有normalizer进行重置，而我的main.css只包含body样式，没有使用任何框架。 - João Costa

Answer 1

这将输出您期望的结果：

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

.promise() 确保先完成 fadeOut()，然后在它完成时执行 .done()。

演示FIDDLE

- Jai

---

我想自从一年前开始，一直在寻找这个东西 ':( - Jicao

太棒了！像魔法一样有效！！ - Samir

Answer 2

利用用户的钩子: Jai

如果您希望在选项卡内容已经打开时它不起作用，请使用:

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

演示 jsfiddle

抱歉我的英语不是很好，我来自另一个国家。 =]

- HackJxG

Answer 3

你正在使用常见的类名.tab-pane进行淡出动画，这似乎是问题所在，请尝试利用你已有的“.active”类。

尝试使用以下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/

JS Fiddle是一个在线的代码编辑器和调试工具，可以帮助开发人员快速测试和分享他们的JavaScript、CSS和HTML代码。

- Perinparajah Prasath