3

Jquery FadeIn / FaeOutを使用して、ページのコンテンツを表示および非表示にしています。そのようです：

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

私の問題は、「。company」が表示されているときにdiv「.company」が「.aboutcontent」の下に配置されているため、divが完全に非表示になるまで「.aboutcontent」の下に表示され、スムーズでない遷移効果が作成されることです。

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-->
4

1 に答える 1

3

.fadeOut()次のように、のコールバックを使用できます。

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

ここで試してみることができます。これは、フェードオンが完了するまで.fadeIn()オンをトリガーしません。.company.aboutcontent

多くのパネルをフェードアウトしているため、一部はすでに非表示になっているため、:visibleセレクターを使用することが重要です。コールバックは、フェードが完了したパネルからすぐにではなく、フェードしたパネルの後でのみトリガーされます...すでに非表示になっているためです。

于 2010-09-08T13:55:43.663 に答える