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

Я пытаюсь выполнить следующее: 1. При щелчке создайте div с id="fader" fadeout 2. replaceHtml фейдера новым html (этот новый HTML появится ниже сгиба браузера) 3. Анимируйте новый HTML для сдвиньте вверх в указанное место

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

Вот javascript:

$("#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 не будет анимироваться, заранее спасибо!


jquery fadeout jquery-animate
person Community    schedule 17.03.2010    source источник
comment
@Jesse - Если вы можете, примите ответы, щелкнув галочку рядом с тем, который помог вам решить проблему, помогает сохранить все НАСТОЛЬКО аккуратным, а ваши вопросы привлекательными для ответов.   -  person Nick Craver    schedule 17.03.2010
comment
Попробуйте также мой func.. дайте мне знать! ;-)   -  person Luca Filosofi    schedule 18.03.2010

Ответы (1)


arrow_upward
5
arrow_downward

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

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

$("#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() возвращает исходный объект, а не тот, который вы только что создали.

person Nick Craver    schedule 17.03.2010
comment
Спасибо за разъяснения по .replaceWith() и цепочке. Предоставленный фрагмент кода работает, я очень ценю вашу помощь! - person ; 17.03.2010
comment
Я запутался в том, что вы говорите: 1) .replaceWith() не имеет обратного вызова, точка; не только в этом случае. И 2) Он ничего не связывал в своем исходном коде (если только он не редактировал код до того, как я его увидел). Цепочка похожа на $('.class').replaceWith('<p></p>').fadeIn();, или я ошибаюсь? - person dclowd9901; 17.03.2010
comment
@dclowd9901 - Если вы удалите $("#fader") в $("#fader").animate({marginTop: "500px"});, это не сработает... обычно вы можете сократить этот селектор, я указал, что удаление этого селектора в этом случае не сработает, поэтому не пытайтесь оптимизировать это :) - person Nick Craver; 17.03.2010
comment
Идеальный. Некоторое время боролся с цепочкой событий анимации! - person dmackerman; 29.10.2010