如何在jQuery幻燈片激活和停用時淡入/淡出內容？

Question

現在，我有我的幻燈片設置，它工作正常，但我想幻燈片（＃接觸式幻燈片）的內容淡入幻燈片激活（幻燈片下），淡出幻燈片停用（向上滑動）。

這裏是我的html：

<section id="contact"> 
    <div class="slide-container"> 
     <section id="contact-slide"> 
      <section id="contact-form"> 
       <a href="#" id="slide-up"></a> 
       <section id="contact-about"> 
        <h2>Who is <span class="green">Company</span>?</h2> 
        <p>We are blah blah blah...</p> 
       </section> 
       <section id="contact-data"> 
        <h2>Get in <span class="green">touch</span>!</h2> 
       </section> 
      </section> 
     </section> 
    </div> 
</section>​ 

下面是JS。你可以看到我試圖在第4行插入$('#contact-slide').fadeOut();，但它不起作用。我究竟做錯了什麼？

$('a#slide-up').click(function() { 
    $('.slide-container').slideUp(400,'easeOutExpo',function(){ 
     $('#slide-toggle').removeClass('active'); 
     $('#contact-slide').fadeOut(); 
    }); 
    return false; 
    }); 

    $('a#slide-toggle').click(function(e) { 
    e.preventDefault(); 

    var slideToggle = this; 
    if ($('.slide-container').is(':visible')) { 
     $('.slide-container').slideUp(400,'easeOutExpo',function() { 
     $(slideToggle).removeClass('active'); 
     }); 
    } 
    else { 
     $('.slide-container').slideDown(300,'easeInExpo'); 
     $(slideToggle).addClass('active'); 
    } 
    }); 
​ 

Answer 1

你可以試試這個用animate方法不透明度動畫從0到1，反之亦然，因爲fadeIn/fadeOut不會完全適合這裏。嘗試這個。

$('a#slide-toggle').click(function(e) { 
    e.preventDefault(); 

    var slideToggle = this; 
    if ($('.slide-container').is(':visible')) { 
     $('.slide-container').slideUp(400,'easeOutExpo',function() { 
     $(slideToggle).removeClass('active'); 
     }).animate({ 
     opacity: 0 
     }, 400); 
    } 
    else { 
     $('.slide-container').slideDown(300,'easeInExpo') 
     .animate({ 
     opacity: 1 
     }, 300); 

     $(slideToggle).addClass('active'); 
    } 
});