Jquery FadeIn и FadeOut

Я пытаюсь затухнуть элемент div, изменить текст внутри него и вернуть его обратно...

Код у меня есть здесь -

<script>
        $(document).ready(function(){
            $("#l2").click(function(event){
                event.preventDefault();
                $("#1").fadeOut();
                $("#1").replaceWith('Testing');
                $("#1").fadeIn();
            });
        });
    </script>

l2 щелкнут, и он заменит div id 1 и исчезнет обратно ... но это не удается ... Любая помощь, спасибо!


jquery fadein fadeout
person Matt    schedule 04.10.2012    source источник
comment
Числовые идентификаторы не рекомендуются...   -  person henryaaron    schedule 05.10.2012
comment
Идентификатор div должен начинаться с буквы   -  person Darcy    schedule 05.10.2012
comment
Можно поподробнее, как он не работает?   -  person Scott S    schedule 05.10.2012
comment
Что такое «Тестирование»? что вы пытаетесь заменить?   -  person wirey00    schedule 05.10.2012
comment
@ Дарси, нет, не должно w3.org/community/webed /wiki/HTML/Атрибуты/   -  person Explosion Pills    schedule 05.10.2012
comment
да, я изменил их, например, чтобы они были короче   -  person Matt    schedule 05.10.2012

Ответы (4)


arrow_upward
3
arrow_downward

Вы хотите использовать .text или .html, а не .replaceWith — это для работы с элементами DOM. Кроме того, .text и .html не работают с очередью, поэтому их нельзя связать в цепочку. Вы должны использовать обратные вызовы:

$("#1").fadeOut(function () {
   $(this).text('Testing').fadeIn();
});
person Explosion Pills    schedule 04.10.2012

arrow_upward
1
arrow_downward

Вам нужно использовать обратные вызовы для достижения вашей цели:

$("#1").fadeOut(500, function(){
     $("#1").html('Testing');
     $("#1").fadeIn();
});

Функция, переданная в качестве параметра, будет выполнена, когда затухание завершится.

person user1026361    schedule 04.10.2012

arrow_upward
0
arrow_downward

Просто используйте обратный вызов затухания. Вот небольшая скрипка http://jsfiddle.net/M5PnY/2/ щелкните текст

редактировать------

изменил замену на html(), раньше не видел

$(document).ready(function(){
    $("#1").click(function(event){
        event.preventDefault();
        $("#1").fadeOut(function(event){
            $("#1").html('Testing').fadeIn();
        });
    });
});​
person user1289347    schedule 04.10.2012
comment
Не работает, потому что .replaceWith удаляет идентификатор. Обратите внимание, что он не исчезает. - person Explosion Pills; 05.10.2012

arrow_upward
0
arrow_downward

Во второй строке вы заменяете элемент № 1 чем-то новым, затем вы не можете снова добавить его обратно.

$("#1").replaceWith('Testing');

результаты в div#1 заменяются текстом Testing

поэтому вместо этого вы должны использовать:

$("#1").html('Testing');
person jtheman    schedule 04.10.2012