jQuery FadeOut, replaceWith, анимация почти работает

Question

Я пытаюсь выполнить следующее:1.На щелчке есть div с id = "fader" Fadeout 2.Заменить Fader с новым HTML (этот новый HTML появится под складом браузера) 3.Анимировать новый HTML-код для перемещения до указанного места

Шаги 1 и 2 работают, шаг 3 — нет, и я не понимаю, почему.

Вот яваскрипт:

$("#fader").fadeOut(1000, function() {
  $(this).replaceWith('<div id=\"fader\" style=\"margin-top:-500px;width:500px;height:400px;border:1px solid black;\">new div</div>', function() {
    $("#fader").animate({marginTop: "500px"});
  });
});

Будем очень признательны за любые мысли о том, почему div не анимируется, заранее спасибо!

Answer 1

В твоем случае .заменить() не имеет обратного вызова, у него другая подпись, чем у анимации.

Вместо этого попробуйте это:

$("#fader").fadeOut(1000, function() {
  $(this).replaceWith('<div id="fader" style="margin-top:-500px;width:500px;height:400px;border:1px solid black;">new div</div>');
  $("#fader").animate({marginTop: "500px"});
});

Обратите внимание, что вы не можете связать это, .replaceWith() возвращает оригинальный объект, а не тот, который вы только что создали.