Question

我正在尝试使用JQuery制作一个语言选择导航，一旦选中，淡出该导航，同时我使用淡入显示第二个导航。

这是我的标记

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;之前也是如此但是id也没有用..

基本上，当我使用display：none隐藏导航时我不能让它们淡入，当我使用.hide（）时它们不会隐藏。

Answer 1

如果您尝试按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区分大小写，因此您应该使用小写的“s”来表示"slow"，而不是"Slow"（.fadeIn()如果您传递字符串，它将默认为400毫秒不承认）。如果在淡出完成之前没有开始淡出，那么它可能会更令人愉悦：

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

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

Answer 2

 $("#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

fadeOut（）和fadeIn（）在同一个动作中

2 个答案: