jQuery的淡入和淡出效果

Question

我設計在這裏一個簡單的網頁是HTML代碼

<div class="wrap-01"> 
     <div class="wrap-02"> 
      <div class="about"> 
       <p> some content </p> 
      </div> <!-- end about page --> 

      <div class="contact"> 
       <p> some content </p> 
      </div> <!-- end contact page --> 

      <div class="service"> 
       <p> some content </p> 
      </div> <!-- end service page --> 

      <div class="quotes"> 
       <blockquote> 
        <p>「 some quote 」 - author - </p> 
       </blockquote> 

       <blockquote> 
        <p>「 some quote 」 - author - </p> 
       </blockquote> 

       <blockquote> 
        <p>「 some quote 」 - author - </p> 
       </blockquote> 

       <blockquote> 
        <p>「 some quote 」 - author - </p> 
       </blockquote> 
      </div> <!-- end quotes page --> 
     </div> <!-- end wrap 02 --> 

     <div class="wrap-03"> 
      <a href="#" class="link-01"> About <br /> <span> some text </span> </a> 
      <a href="#" class="link-02"> Contact <br /> <span> some text </span> </a> 
      <a href="#" class="link-03"> Service <br /> <span> some text </span> </a> 
     </div> <!-- end wrap 03 --> 
    </div> <!-- end wrap 01 --> 

我寫的CSS這個網站的編碼這裏是

@charset "utf-8"; 
/* CSS Document */ 
body{font-family: Arial;} 
.wrap-01{ 
    width: 740px; 
    padding: 20px; 
    margin: auto; 
} 

.about, .contact, .service, .quotes{ 
    height: 350px; 
    width: 700px; 
    background: #fff; 
} 

.wrap-02{ 
    position: relative; 
} 

.wrap-03{ 
    padding-right: 30px; 
    padding-left: 30px; 
} 

.about, .contact, .service{ 
    position: absolute; 
    display: none; 
} 

.about p, .contact p, .service p{ 
    font-size: 15px; 
    padding: 10px 25px 10px 25px; 
    text-align: justify; 
} 

.my-link{ 
    float: left; 
    background: orange; 
    margin-top: 50px; 
    margin-bottom: 0; 
    text-decoration: none; 
    color: #fff; 
    font-size: 20px; 
    padding: 20px 20px 0 20px; 
} 

.link-01{ 
    margin-right: 10px; 
} 

.link-02{ 
    margin-right: 10px; 
    margin-left: 10px; 
} 

.link-03{ 
    margin-left: 10px; 
} 

這裏是我的jQuery代碼

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".link-01").click(function(){ 
      $(".about").fadeIn("slow"); 
      $(".contact").fadeOut("slow"); 
      $(".service").fadeOut("slow"); 
      $(".quotes").fadeOut("slow"); 
     }); 
    }); 
    </script> 

所以現在我想要保留，聯繫，服務，報價divs這個順序時，頁面加載報價div shoul d顯示第一個和其他人（關於，聯繫，服務）應該隱藏，當我點擊鏈接01關於鏈接應該顯示和其他人（聯繫，服務，報價）應該隱藏使用jQuery fadeIn和fadeOut效果，所以我想這樣做其他人（link-02和link-03）。

現在我想知道如何正確地做這件事 這是jQuery代碼錯誤還是這不正確？ 當我點擊鏈接-01所有包裹-03隱藏爲什麼這是？

Answer 1

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".link-01").click(function(){ 
      $(".wrap-02 div").hide('slow',function(){ 
       $(".about").fadeIn("slow"); 
      }); 
     }); 
    }); 
</script> 

，或者如果您在標記的一些變化去，你可以概括這一點，

<script type="text/javascript"> 
$(".wrap-03 a").click(function(){ 
    var className = $(this).attr("id"); 
    $(".wrap-02 div").hide('slow',function(){ 
      $("."+className).fadeIn("slow"); 
    }); 
}); 
</script> 
<div class="wrap-01"> 
     <div class="wrap-02"> 
      <div class="about"> 
       <p> some content </p> 
      </div> <!-- end about page --> 

      <div class="contact"> 
       <p> some content </p> 
      </div> <!-- end contact page --> 

      <div class="service"> 
       <p> some content </p> 
      </div> <!-- end service page --> 

      <div class="quotes"> 

      </div> <!-- end quotes page --> 
     </div> <!-- end wrap 02 --> 

     <div class="wrap-03"> 
      <a href="#" id="about" class="link-01"> About <br /> <span> some text </span> </a> 
      <a href="#" id="contact" class="link-02"> Contact <br /> <span> some text </span> </a> 
      <a href="#" id="service" class="link-03"> Service <br /> <span> some text </span> </a> 
     </div> <!-- end wrap 03 --> 
</div> 

Answer 2

這裏有一個的jsfiddle根據您的JS和標記工作的例子。你需要調整你的CSS，我不擅長這一點。

選中此項：http://jsfiddle.net/nczUN/1/