jQuery AJAX с использованием fadeIn + replaceWith - PullRequest
Новая
       33

jQuery AJAX с использованием fadeIn + replaceWith

3 голосов
/ 12 июня 2011

На SO есть несколько вопросов и ответов, но я не нашел ни одного, которые касались моей проблемы.И я озадачен этим.Пожалуйста, перенаправьте меня на ссылку, если вам известен доступный ответ на этот вопрос.

На моей странице есть пустой DIV #posts_insert, в который новые сообщения вставляются через Ajax.та новая запись, чтобы исчезнуть, заменяя #posts_insert.Я пробовал несколько итераций на success, используя hide() до fadeIn, но я просто не могу заставить это работать.

Есть идеи, как это решить?Заранее спасибо.

Ответы [ 3 ]

10 голосов
/ 12 июня 2011

Как насчет: 

$("#posts_insert").replaceWith(function() {
    return $(html).hide().fadeIn();
});

Вот рабочий пример: http://jsfiddle.net/andrewwhitaker/jTLn5/

0 голосов
/ 12 июня 2011

Как то так? 

$.ajax({
    url: 'chat/posts_submit/' + <?php echo $page_id; ?>,
    type: 'POST',
    data: $('#posts_form').serialize(),
    dataType: 'html',
    success: function(html) {
        var newContent = $(html);
        $('#posts_insert').fadeOut(function() {
            $(this).replaceWith(newContent.hide());
            newContent.fadeIn();
        });
    }
});
0 голосов
/ 12 июня 2011

вы можете попробовать: 

success: function(html) {
   var $container = $('#posts_insert').parent();
   $container.fadeOut('fast', function() {
      $('#posts_insert').replaceWith(html);
      $container.fadeIn();
   });
}

может дать вам эффект, который вы ищете.

EDIT: Почему бы вам не поместить контейнер вокруг (#posts_insert), затемнить его, replaceWith () и fadeIn контейнера?

...