fadeout（）和fadeIn（）在同一個動作

我試圖使用JQuery來做一個languaje選擇導航，並且，一旦選擇，淡出導航同時我顯示第二個導航使用淡入。fadeout（）和fadeIn（）在同一個動作

這是我的標記

div id="content"> 
     <img src="img/logo.png"> 
     <ul id="navLang"> 
      <li><a href="#" id="EN">English</a></li> 
      <li><a href="#" id="ES">Español</a></li> 
     </ul> 
     <div id="navEng"> 
      <ul > 
       <li><a href="#">Beauty</a></li> 
       <li><a href="#">Campaign</a></li>   
       <li><a href="#">Editorial</a></li> 
       <li><a href="#">Biography</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
     <div id="navEs"> 
      <ul> 
       <li><a href="#">Belleza</a></li> 
       <li><a href="#">Campañas</a></li>   
       <li><a href="#">Editorial</a></li> 
       <li><a href="#">Biografía</a></li> 
       <li><a href="#">Contacto</a></li> 
      </ul> 
     </div> 
    </div>

，這是我的腳本

$(document).ready(function() { 
    $("#navEng").hide(); 
    $("#navEs").hide(); 
    $("#EN").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("navEng").fadeIn("Slow"); 
    }); 
    $("#ES").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("navEs").fadeIn("Slow"); 
    }); 
});

淡出效果效果很好，但我不能讓第二導航褪色的，我試過使用display：none;之前以及但編號沒有任何工作都不..

基本上，當我隱藏導航使用顯示：無;我不能讓他們淡入，當我使用.hide（）他們不會隱藏。

來源

2013-10-07 user2770956

不應該是'$（「＃navEs」）'而不是'$（「navEs」）'？ – jayhendren

如果你想選擇的ID，你需要在你的選擇#的元素，那就是$("#navEng")而不是$("navEng")（等）：

$(document).ready(function() { 
    $("#navEng").hide(); 
    $("#navEs").hide(); 
    $("#EN").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("#navEng").fadeIn("slow"); 
    }); 
    $("#ES").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("#navEs").fadeIn("slow"); 
    }); 
});

編輯：請注意，JavaSript的情況下，敏感，所以你應該說"slow"用小寫「s」，而不是"Slow"（.fadeIn()將默認爲400ms，如果你傳遞一個字符串，它不能識別）。而且它很可能是一個更令人滿意的效果，如果你沒有，直到淡出結束後開始褪色：

$("#navLang").fadeOut("slow", function() { 
     $("#navEng").fadeIn("slow"); 
    });

演示：http://jsfiddle.net/vmECd/

來源

2013-10-07 04:24:11 nnnnnn

我很慚愧，修正了它，但是fadeIn（）仍然不起作用 – user2770956

在你編輯問題時，你只修復了一些缺少的'＃'選擇器 - 你沒有修復'.fadeIn（） '線。 – nnnnnn

工作，我不相信我沒有看到它，一定是最後一刻...謝謝你 – user2770956

$("#navLang").fadeOut("slow"); 
     $("#navEng").fadeIn("Slow"); // apply "#"

，可以通過像更好的辦法做下面

$(document).ready(function() { 
    $("#navEng,#navEs").hide(); 
    $("#EN").click(function(){ 
    $("#navLang").fadeOut("slow",function(){ 
    $("#navEng").fadeIn("Slow"); // apply "#" 
    }); 

    }); 
    $("#ES").click(function(){ 
    $("#navLang").fadeOut("slow",function(){ 
    $("#navEs").fadeIn("Slow"); // apply "#" 
    }); 
}); 

});

參考fadeOut，fadeIn

來源

2013-10-07 04:27:00

fadeout（）和fadeIn（）在同一個動作

回答

相關問題