Как медленно исчезать div, обновлять контент, а затем медленно исчезать в div, используя jQuery?

У меня есть div Я хочу исчезнуть, обновить его содержимое, а затем снова увязнуть. До сих пор я пробовал:

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

Что происходит, так это то, что погашение завершается и вызывает анонимный обратный вызов. Пока что так хорошо.

Содержимое div заменяется правильно, но эффект fadeIn() является немедленным - без плавного перехода, просто быстрый быстрый переход к обновленному div.

Есть ли лучший способ сделать это? Спасибо за ваш совет.

Ответ 1

Вы должны сделать это таким образом (это работает, проверен код):

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').html(content);
    $('#myDivID').fadeIn('slow');
});

Ваш код не работал, потому что новый созданный div сразу отображается. Другим решением является добавление display:none следующего вида:

   $('#myDivID').fadeOut('slow', function() {
      $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
      $('#myDivID').fadeIn('slow');
  });

Надеюсь, что это поможет Приветствия

Ответ 2

использовать SetTimeOut

setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);

это работает

jsFiddle http://jsfiddle.net/3XYE6/1/

$('#doit').click(function(){
    $('#myDivID').fadeOut('slow', function() {
        $('#myDivID').html('New content in MyDiv ('+Math.random()+')')
        setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);
    });    
})

Ответ 3

это должно сделать это!

http://jsfiddle.net/3XYE6/

Ответ 4

Что-то вроде этого будет работать:

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>")
    $('#myDivID').hide().delay(2000).fadeIn('slow'); 
});

Тест здесь: http://jsfiddle.net/tomgrohl/PgcTZ/

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

Ответ 5

Когда вы используете replaceWith содержимое будет видимым, поэтому нет плавного перехода.

Сначала сокрытие div, а затем вызов fadeIn даст плавный переход.

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});

Ответ 6

Попробуйте это.

http://jsfiddle.net/X3cnT/

$('#myDivID').fadeOut('slow', function() {
        $('#myDivID').html("all this text");
        $('#myDivID').fadeIn('slow');
});