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

Question

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

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

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

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

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

Answer 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');
  });

Надеюсь, это поможет Cheers

Answer 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);
    });    
})

Answer 3

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

http://jsfiddle.net/3XYE6/

Answer 4

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

http://jsfiddle.net/X3cnT/

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

Answer 5

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

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

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

Answer 6

Примерно так будет работать:

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

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

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