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

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

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

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

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

есть ли лучший способ сделать это? Спасибо консультация.

14
callback fadein fadeout html jquery

6 ответов

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

$('#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');
  });

надеюсь, это поможет Ура!--6-->

24

использовать 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);
    });    
})
5

Это должно помочь!

http://jsfiddle.net/3XYE6/

2

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

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

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

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

http://jsfiddle.net/X3cnT/

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

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

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

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

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

1