0

我正在尝试使用 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() 时它们不会隐藏。

4

2 回答 2

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 区分大小写，因此您应该"slow"使用小写的“s”，而不是"Slow"（.fadeIn()如果您传递一个它无法识别的字符串，则默认为 400 毫秒）。如果在淡出完成之前不开始淡入，它可能会产生更令人愉悦的效果：

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

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

于 2013-10-07T04:24:11.443 回答
0 
 $("#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 "#"
    });
});

});

参考淡出，淡入

于 2013-10-07T04:27:00.933 回答