fadeOut () и fadeIn () в одном действии

Question

fadeOut () и fadeIn () в одном действии

0

Я пытаюсь использовать JQuery, чтобы сделать языковой выбор nav, и, после того, как выбранный, исчезнет, что nav в то же время я покажу второй навигатор, используя fade in.

Это моя разметка

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(), они не скроют.

user2770956 07 окт. 2013, в 06:54

Источник

0

$("#navEs") это не должно быть $("#navEs") вместо $("navEs") ?
jayhendren 07 окт. 2013, в 04:24

Теги:

jquery

css

fadein

fadeout

2 ответа

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 "#"
    });
});

});

ссылка fadeOut, fadeIn

Rituraj ratan 07 окт. 2013, в 02:24

Ещё вопросы

$("#navEs") это не должно быть $("#navEs") вместо $("navEs") ?

nnnnnn · Accepted Answer · 2013-10-07T02-55-00.000Z

Если вы пытаетесь выбрать элементы по 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");
    });
});

EDIT: Обратите внимание, что JavaSript чувствителен к регистру, поэтому вы должны сказать "slow" с строчным "s", а не "Slow" (.fadeIn() будет по умолчанию 400 мс, если вы передадите строку, которую он не распознает). И это, вероятно, будет более приятным, если вы не начнете исчезать до тех пор, пока не исчезнет постепенное исчезновение:

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

Демо: http://jsfiddle.net/vmECd/

мне стыдно, все исправили, однако fadeIn () все еще не работает
При редактировании вопроса вы исправили только некоторые недостающие # селекторы - вы не .fadeIn() те, что в .fadeIn() .
работал, я не могу поверить, я не видел это, должно быть, поздний час ... спасибо