Jquery fadeIn / fadeOut проблемы с анимацией - PullRequest
Новая
       28

Jquery fadeIn / fadeOut проблемы с анимацией

3 голосов
/ 08 сентября 2010

Я использую Jquery FadeIn / FaeOut, чтобы показать и скрыть контент на моей странице.Вот так: 

$('.subnav_company').click(function(){
                    $('.aboutcontent').fadeOut('slow');
            $('.company').fadeIn('slow');           
                    });

Моя проблема в том, что поскольку div ".company" располагается ниже ".aboutcontent", когда отображается ".company", он появляется под ".aboutcontent", пока div полностью не скрыт, создавая эффект плавного перехода.

Как сделать переход между отображением и скрытием элементов div плавным?Не нервный.Вот HTML: 

<div class="aboutcontent developers">
<h1>Developers</h1>
<h4>The developers are the best</h4>
<p> we have some great developers</p>
</div>
<!--End aboutcontent developers-->


    <div class="aboutcontent company">
    <h1>Company</h1>
    <h4>offers a complete management tool . It's an easy to use and efficient way to manage and plan  stuff. It allows people to communicate and get along.</h4>
    </div>
    <!--End aboutcontent company-->

1 Ответ

3 голосов
/ 08 сентября 2010

Вы можете использовать обратный вызов для .fadeOut(), например: 

$('.subnav_company').click(function(){
  $('.aboutcontent:visible').fadeOut('slow', function() {
    $('.company').fadeIn('slow');           
  });
});

Вы можете попробовать здесь , это не вызовет .fadeIn() на .company до тех пор, пока не исчезнет .aboutcontent.

Поскольку вы затушевываете много панелей, некоторые из которых уже скрыты, важно использовать селектор :visible , поэтому обратный вызов срабатывает только после затухающей, а не сразу от исчезновение завершается мгновенно ... потому что оно уже скрыто.

...