Question

我见过类似的帖子，但没有一个能解决问题。我有一系列div需要fadeIn / fadeOut，具体取决于用户点击的内容。长话短说。我可以让它第一次工作，但在那之后，如果我点击元素，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后，您尝试fadeOut .2nd-level，但在单击#party后淡入.find2a（.2nd-level元素的子元素）。

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

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

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

工作示例 - 我添加了一些CSS来隐藏二级课程并将一个Party / Entertainment选项包含在一个带有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);
    });
});

FadeIn功能只能工作一次

2 个答案: