如何在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'); 
    } 
});