FadeIn 功能只能使用一次

Question

我看过类似的帖子，但没有一个能完全解决问题。我有一系列 div，我需要根据用户点击的内容来淡入/淡出。长话短说。我可以让它第一次工作，但之后如果我单击元素，div 会淡出但什么都不会淡入。

<section class="row margin-top-20">
    <div class="col-xs-12">
        <section class='find1 transparent-cheese'><!--find1-->
            <h3 class='review-title'>What's the occasion?</h3>
            <section class='row'>
                <div class='col-xs-3 margin-top-20'>
                    <div id='party'></div>
                        <p class='text-center find'>Party/ <br />
                            Entertainment
                        </p>
                </div>
                 <div class='col-xs-3 margin-top-20'>
                    <div id='cooking'></div>
                    <p class='text-center find'>Cooking
                    </p>
                </div>
                 <div class='col-xs-3 margin-top-20'>
                    <div id='treat'></div>
                        <p class='text-center find'>Treat Yourself
                        </p>
                </div>
                 <div class='col-xs-3 margin-top-20'>
                    <div id='not-sure'></div>
                        <p class='text-center find'>Not Sure
                        </p>
                </div>
            </section>
        </section> <!--end find1-->
    </div>
</section>
<section class='row 2nd-level'>
    <div class='col-xs-12'>
        <section class='find2a transparent-cheese'><!--find2a-->
            <img class='start-over-arrow' src="<?php echo get_stylesheet_directory_uri(); ?>/images/start-over-arrow.png"><p class='start-over'> start over</p>
            <h3 class='review-title'>What kind of party?</h3>
            <section class='row'>
                <div class='col-xs-3 margin-top-20'>
                    <div id='dinner'></div>
                        <p class='text-center find'>Dinner Party <br /> with Guests
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='kid-party'></div>
                        <p class='text-center find'>Kid's Party
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='foodie'></div>
                        <p class='text-center find'>Foodie Friends
                        </p>
                </div>
            </section>
        </section><!--end find2a-->
        <section class='find2b transparent-cheese'><!--find2b-->
            <img class='start-over-arrow' src="<?php echo get_stylesheet_directory_uri(); ?>/images/start-over-arrow.png"><p class='start-over'> start over</p>
             <h3 class='review-title'>What are you making?</h3>
             <section class='row'>
                <div class='col-xs-3 margin-top-20'>
                    <div id='fondue'></div>
                        <p class='text-center find'>Fondue
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='grilled-cheese'></div>
                        <p class='text-center find'>Grilled Cheese
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='pasta'></div>
                        <p class='text-center find'>Pasta/ <br />
                            Baked Foods
                        </p>
                </div>
                <div class='col-xs-3 margin-top-20'>
                    <div id='salad-toppers'></div>
                        <p class='text-center find'>Salad Toppers
                        </p>
                </div>
            </section>
        </section><!--end find2b-->

这是一次有效的 jQuery 代码，作为记录，我尝试过 fadeToggle 和 show()/hide()。我知道有办法通过 switch 语句或 if/else 来实现这一点，但我很确定没有它是可能的。

$('#party').click(function(){
    $('.find1').fadeOut(function(){
      $('.find2a').fadeIn(1000);
    });
});

 $('.start-over').click(function(){
    $('.2nd-level').fadeOut(function(){
   $('.find1').fadeIn(1000);
    });
});

Answer 1

在您的示例中，单击 .start-over 后，您尝试淡出 .2nd-level，但在单击 #party 后淡入 .find2a（.2nd-level 元素的子元素）。

.find2a 不会重新出现，因为它的父级 .2nd-level 在fadeOut 之后是透明的。如果您希望它的任何子元素重新出现，您需要将 .2nd-level 淡入，而不是 .find2a。您可能希望此时隐藏其他子元素以达到预期的效果。

$('#party').click(function(){
    $('.find1').fadeOut(function(){
      $('.2nd-level').fadeIn(1000);
    });
});

 $('.start-over').click(function(){
    $('.2nd-level').fadeOut(function(){
   $('.find1').fadeIn(1000);
    });
});

工作示例 - 我添加了一些 CSS 来隐藏 2 级类，并将派对/娱乐选项包装在 id 为派对的 div 中：

http://jsfiddle.net/LbMff/

Answer 2

这是适用于我的页面的答案。我还有几个不同的类，但它们都遵循这个基本概念。

$('#party').click(function(){
    $('.find1').fadeOut(function(){
      $('.find2a').fadeIn(1000);
    });
});

$('#cooking').click(function(){
    $('.find1').fadeOut(function(){
      $('.find2b').fadeIn(1000);
    });
});

 $('.start-over').click(function(){
    $(this).parent().fadeOut(function(){
   $('.find1').fadeIn(1000);
    });
});