JQuery, анимация для нескольких элементов сразу, возможно ли?
Как с помощью JQuery анимировать два разных элемента одновременно, причем так чтобы у разных элементов анимировались разные свойства?
Есть див, в который загружаются ajax данные, и он делает slideDown. Чобы пользователь не скролил вниз, когда загруженны Ajax данные, одновременно с div.slideDown должна работать анимация скролинга окна (пока это $('html').animate({scrollTop : '+='+height}) ). Однако, JQuery выполняет эту анимацию раздельно, в результате чего видно, как див скачет относително окна. Как одновременно анимровать высоту дива и scrollTop окна? |
Цитата:
|
Наверно, тему правильнее было бы назвать "Синхронная анимация в JQuery".
Навигация похожа на http://slashdot.org/, кнопка "Many more" снизу. Только загружаемых данных меньше, они умещаются по высоте в высоту экрана и загружаются почти мгновенно, и для их показа используется анимация (slideDown). После нажатия на кнопку "показать еще" приходится скролить на экран вниз, чтобы увидеть загруженные ссылки на новости. Хорошо бы анимировать скролл окна вместе со slideDown, чтобы сразу видеть загруженые данные. |
Цитата:
|
У меня загружаемых данных меньше, они умещаются по высоте в высоту экрана и загружаются почти мгновенно, и для их показа используется анимация (slideDown). На slashdot данных больше, они грузятся некоторое время, и для их показа не используется анимация.
В общем, поскольку данные умещаются в экран, пользователь должен проскролить на экран вниз. А поскольку данные загружаются малыми порциями, то быстрое пролистывание вниз сопровождается постоянным не нужным скролингом. |
Цитата:
|
Дизайнер считает, что должно быть малыми порциями. Ссылку отправляю в личку.
|
ну так. Сейчас хорошо сделано. Не надо мешать пользователю читать сайт, принимать за него решения. Например, я просматриваю список новостей и щелкаю на "показать еще", чтобы подгрузились еще новости, пока я дочитаю то, что уже есть. К чему мне этот автоматический скролл?
p.s. извини, я не помогаю совершать ошибки... p.p.s. речь в общем-то не о дизайне, а о юзабилити. Но с дизайнером я согласен, там же несколько разделов, один за другим. Сложно будет скроллить к следующему разделу, если большими блоками показывать |
Вообще то я тоже считаю, что лучше загружать маленькими порциями.
Цитата:
Однако эти новости появляются внизу, где их не видно, после нажатия кнопки надо еще скролить вниз. Кроме того, сама кнопка уезжает вниз. Если сделать как планируется, новости будут видны сразу, и кнопка будет все время фиксирована относительно окна. То есть можно листать новости одним щелчком мыши, без перемещений и скрола. И вообще тема создавать в надежде получить помощь. А не для того, что бы ты меня отговаривал от поиска решения. |
Цитата:
Цитата:
Суп. Надо. Есть. Ложкой! |
Приведенная выше копипаста ни как не относится к обсуждаемому вопросу.
Я четко спросил, КАК сделать синхронную анимацию в JQuery. Вместо того, что бы помочь или сказать не знаю как/пройти мимо, дознаешся до вещей, напрямую к вопросу не относящихся, заранее с установкой к чему нибудь придраться, и сказать, что ты бы сделал по другому. Способ навигации - часть интерфейса, а о интерфейсе как известно разводят самые многостраничные холивары. А ты тонкий тролль. |
Цитата:
UPD еще немного копипасты |
Моя проблема в том, что анимация скролла, и анимация появления контента происходит не синхронно. Ни сообщения по теме нет, а только флуд и флейм.
|
Так.
Во-первых. Обсуждаемая опция - часть интерфейса. А на почве интерфейса происходят самые сильные холивары. vi[m] vs emacs, vim/emacs vs нормальные редакторы, редакторы vs IDE, GNOME vs KDE, браузерные войны etc. Хорошо/плохо здесь ориентируется на личные предпочтения, привычку, и не более. Во-вторых ты действительно не привел ни одного аргумента. Цитата:
Цитата:
А вот листать малыми порциями, постоянно возвращаясь скроллом, очень неудобно. А в главных, от тебя не требовалось разводить тему преимущества того или иного способа навигации, а просто помочь в реализации. |
Цитата:
а то, что ты не можешь это реализовать только подтверждает, что это не нужно ;) |
То, что в JQuery нельзя сделать синхронную анимацию, лишь говорит о ее недостатках.
|
не серьёзно совсем
Уже год прошел, а ни кто не делится информацией :(
Мне сейчас похожий функционал требуется, нужно уменьшать блок 1 и добавлять внутренний отступ к соседнему блоку 2, при наведении.
$('адрес блока инициирования').hover(function()
{
$('блок 1').animate({'width': '-=10px'}, 300);
$('блок 2').animate({'paddingRight': '+=10px'}, 300);
},
function() {
*процедура при снятии курсора*
});
})
Выполняется практически поочередно, разница в старте функций (начала выполнения по времени) так велика, что искажается идея анимации. Гуглил - почти везде ситуация одинакова - ни какой конкретики, а "супер ответ" про суп и ложку, который отношения не имеет к теме вообще. Когда тема создается, учитывайте пожалуйста, что по поисковым запросам, данная тема будет проявляться в результатах, и в итоге две страницы флуда. Цитата:
Или в этом случае jq подождет указанное время, запустит первую, а следом вторую? Конструкцию как сейчас, я пробовал и местами менять (тогда очерёдность меняется) и думал время выполнения подогнать под один знаменатель - бесполезно. |
ответ (решение)
Вариант с использованием SetTimeout - отпал как, предположительно не возможное решение. Пробовать не стал, но думаю поочередность сохранится.
Первый вариант был придумать конструкцию типа $( "блок 1" ).add( "блок 2" )и этим усложнить всё ситуацию. НО - чудо свершилось, и имя ему queue- что значит "очередь" Конструкция приняла такой вид:
$('адрес блока инициирования').hover(function()
{
$('блок 1').animate({'width': '-=10px'}, { duration: 300, queue: false });
$('блок 2').animate({'paddingRight': '+=10px'}, { duration: 300, queue: false });
},
function() {
*процедура при снятии курсора*
});
})
так вот "queue: false" - снимает этот вопрос! jquery гораздо продуманней, чем может показаться. ссылка на страницу в jq api - http://api.jquery.com/queue/ Буду рад, если вам пригодится данная информация) |
используйте событие step в методе animate
$('блок 1').animate({
'width': '-=10px'
}, {
duration: 300,
step: function( now, data ) {
// тут и обрабатывайте все что нужно, каждый шаг
}
});
|
Всё равно в итоге лажа получается.
Мне нужно несколько групп блоков обрабатывать независимо, т.е. множество блоков, внутри которых используется анимация вложенных блоков при наведении, так вот если после наведения на блок 1 сразу наводить на блок 2, где используется анимация, то процедура назначенная блоку 1 при снятии не выполняется, а выполняется сразу процедура наведения на блок 2, а блок 1, так и остается как-будто фокус мыши на нем. Это пол беды. Если вернуть мышь на блок 1, то парметры 'width': '-=10px' выполняются принимая за начальное значение width уже -=10px, так как осталось после выполнения первого наведения. В итоге если навести 5 раз, то блок на 50px меньше становится, и не возвращается в начальное заданное css значение. Есть мысли у кого нибудь? |
Было это больше года назад, но queue тогда не решало проблемы, насколько я помню.
Цитата:
Цитата:
|
Logo,
Imхо - тут по-моему подход несколько иной нужно делать А чисто временно свернуть все за дивом, вплоть до полной загрузки а у div cделать margin-bottom ? Как Див подгрузился - разворачиваете нижние данные, *можно и с анимацией ---------------------------- Вариант 2: Cделать подгружаемый блок временно position:fixed; привязав нижний край к обрезу экрана, по загрузке, возвращаем нормальную позицию ---------------------------- Просто засинхрячить скролл в разных браузерах - достаточно тяжело (С Мозиллой как то две недели промучился |
| Часовой пояс GMT +3, время: 15:48. |