Одновременный слайд и прокрутка в JQuery - PullRequest
Новая
       20

Одновременный слайд и прокрутка в JQuery

0 голосов
/ 25 октября 2011

Я работаю над приложением, которое включает чат Ajax.Новые сообщения добавляются в конец окна чата, под которым есть текстовое поле и кнопка, позволяющая пользователю отправлять новые сообщения.Каждая новая строка добавляется в анимированном материале с помощью jQuery slide () к содержимому строки (в моем случае, элемент ap).

После того, как страница заполнена сообщениями, пользователю по-прежнему приходится прокручивать страницу вниз.для того, чтобы увидеть новые сообщения и текстовое поле.Я хотел бы избавить пользователя от необходимости автоматической прокрутки вниз при добавлении новых сообщений.

Я могу добиться этого с помощью animate () сразу после слайда (), как показано ниже: 

    newRow.find("p").slideDown();
    $('html, body').animate({
        scrollTop: $('#Bottom').offset().top
    });

Это работает, но результат несколько нервный.Любой совет, как заставить слайд и анимацию работать вместе, чтобы общая анимация была плавной?

РЕДАКТИРОВАТЬ: Вы можете увидеть, как это работает, и поиграть с ним на http://jsfiddle.net/tzA4d/1/. Подождите несколько секунд, покасообщения доходят до нижней части экрана, и вы увидите не очень плавную прокрутку.

1 Ответ

1 голос
/ 30 июля 2012

Вы можете сделать scrollTop в функции обратного вызова "step" 

row.find("p").hide(); 
lastRow.before(row); 
row.find("p").animate({"height":"toggle", "padding-top":"toggle","padding-bottom":"toggle"}, 
    { duration: 400,
      step: function(now, fx) {                
               $('html, body') .scrollTop($('#Bottom').offset().top);
            } 
    });
...