jQuery fadeOut один div, fadeIn другой на его месте

Я пытаюсь использовать простой скрипт jQuery для исчезновения одного div и исчезновения другого на его месте, но по какой-то причине первый div никогда не исчезает. Вероятно, это очевидная проблема с кодом, но я не могу ее разобрать.

<style>
    #cuerpo { display: none; }
</style>

<div id="cuerpo"></div>
<div id="inicio"></div>

<script>
    function delayed() {
        $("div").fadeIn(3000, function () {
            $("cuerpo").fadeIn("slow");
        });
    }
    $("a").click(function () {
        $("inicio").fadeOut("slow");
        setTimeout("delayed()",500);
    });
</script>

как мне это сделать? Что я делаю неправильно?


person lisovaccaro    schedule 30.06.2011    source источник


Ответы (3)


ОБНОВЛЕНИЕ

Самый простой способ сделать это - использовать обратный вызов:

$('a').click(function(){
    $('#fadeout').fadeOut(300, function () {
         $('#fadein').fadeIn(300);
    });
});

затем HTML:

<a href="#">In/Out</a>

<div id="fadeout">Fade Out</div>
<div id="fadein" style="display:none;">Fade In</div>

СТАРЫЙ:

Есть простой способ сделать это:

$('a').click(function(){
    $('#fadeout').fadeOut(300);
    $('#fadein').delay(400).fadeIn(300);
});
person Shawn31313    schedule 27.07.2011

Я думаю, вы можете использовать обратный вызов ...

$('#fadeout').fadeOut(300, function(){
                                      $("#fadein").fadeIn(300);
                                      });

это самый стабильный способ ....

person misha312    schedule 20.07.2015

Синтаксическая ошибка должна быть

$("#inicio").fadeOut("slow");

и не

$("inicio").fadeOut("slow");

сходным образом

$("#cuerpo").fadeIn("slow");

и не

$("cuerpo").fadeIn("slow");
person vasanth.v    schedule 30.06.2011
comment
Я исправил это, удалив весь HTML внутри inicio с помощью javascript. Однако даже после исправления кода div id = inicio продолжал появляться. Не знаю почему. Хотелось бы правильно написать код. - person lisovaccaro; 30.06.2011