Функция FadeIn работает только один раз

Question

Функция FadeIn работает только один раз

0

Я видел подобные сообщения об этом, но никто не решает проблему. У меня есть серия 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 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 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);
    });
});

London804 27 фев. 2014, в 00:54

Источник

Теги:

jquery

toggle

fadein

2 ответа

Ещё вопросы

crickkills · Answer 1 · 2014-02-26T21-11-00.000Z

В вашем примере после нажатия.start-over вы пытаетесь fadeOut.2nd-level, но затухаете в.find2a (дочернем элементе элемента.2nd-level) после нажатия #party.

.find2a не будет появляться, потому что его родительский,.2-й уровень, прозрачен после 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-го уровня и завернул опцию Party/Entertainment в div с id-участником:

http://jsfiddle.net/LbMff/

Интересно, что ваш jsfiddle работает, потому что, когда я взял ваш код и подключил его к своему .js, все, что он делал, это исчезал .find1, но ничего не исчезало. Однако ваша логика в отношении родительского элемента является правильной, поэтому я просто переключил «.2nd-level» на «.find2a», и это сработало так, как я хотел. Благодарю.

London804 · Answer 2 · 2014-02-27T15-24-00.000Z

Это ответ, который работал на моей странице. У меня есть еще несколько классов с разными классами, но все они следуют этой базовой концепции.

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