Страница 1 из 2
JQuery css после animate
Добавлено: 14 янв 2011, 17:38
AsMasteR
Доброе!
Пытаюсь реализовать на JQuery вот такой вот алгос:
Код: Выделить всё
$('#content').animate({left:'-1254px'},1000); $('#curent img').attr({ 'src':$('#next img').attr('src'), 'height':$('#next img').attr('height') }); $('#curent h3').html($('#next h3').html()); $('#curent #text').text($('#next #text').text()); $('#curent b').text($('#next b').text()); $('#content').css('left','-627px;');
то есть хочется так: сдвигаем картинку анимашкой, потом подменяем инфу в том месте, где раньше была картинка, потом сдвигаем обратно на место без анимашки.
а на практике назад не возвращает (( подозреваю дело в том, что код за animate успел выполниться ещё до того, как анимация закончилась - не тру. как исправить?
Re: JQuery css после animate
Добавлено: 14 янв 2011, 19:07
AsMasteR
Александр, сори не нашёл кнопку редактировать пост... [позднее и не удивительно, ведь кнопка пропадает со временем]
продолжу мысль...
да и артефакты в виде изменения поста во время анимации тоже не радуют, так что нужно как то решать..
попробую settimeout, но это костыль а не решение..
неа, костыль не работает))
ещё попутно простой вопрос, а как ловить события keypress в iframe? на локалке все работает загружаю в контакт, события с клавы не приходют... делаю вот так:
Код: Выделить всё
$(window).keydown(function(event){ switch (event.keyCode) { case 37: //стрелка влево left(); break; case 39: //стрелка вправо right(); break; } });
Re: JQuery css после animate
Добавлено: 14 янв 2011, 21:42
Александр
AsMasteR писал(а):подозреваю дело в том, что код за animate успел выполниться ещё до того, как анимация закончилась
Код: Выделить всё
$('#content').animate({ left:'-1254px' }, 1000, function() { // это происходит когда анимация завершилась alert('Animation complete.'); });
В '-627px;' не нужна ";".
Сначала делаешь left:'-1254px'
Потом 'left','-627px;'
Разные значения специально? ";"
AsMasteR писал(а):а как ловить события keypress в iframe?
Наверно надо искать причину здесь
Re: JQuery css после animate
Добавлено: 14 янв 2011, 22:24
AsMasteR
спасибо! уже который раз выручаешь! заработало!
да, значения специально такие.
а как сделать так, чтобы наложить два асинхронных запроса логика такая:
Код: Выделить всё
$.getJSON('../control/index.php?id='+id,>> animate <<{...} function(json){обрабатываем результат загрузки});
ну то есть пока с серва инфу качаем развлекаем пользователя анимашкой в 1 секунду
Re: JQuery css после animate
Добавлено: 14 янв 2011, 23:42
AsMasteR
c iframe почти разобрался кнопки работают, но только тогда, когда есть фокус на фрейме (( а хотелось бы всегда... чтобы взять фокус приходится тыкнуть мышкой в фрейм и вот тогда навигация с клавиатуры начинает работать))
Re: JQuery css после animate
Добавлено: 15 янв 2011, 15:36
Александр
AsMasteR писал(а):ну то есть пока с серва инфу качаем развлекаем пользователя анимашкой в 1 секунду
1. запусти анимацию
2. начни выполнять запрос
3. по завершению запроса - заверши анимацию.
Re: JQuery css после animate
Добавлено: 16 янв 2011, 14:30
AsMasteR
вот мне это и надо, но как? что значит заверши анимацию? анимация фиксированая - 1 секунда, а запрос может и за три секунды прийти на диалапе, суть в экономии времени пользователем
имеем:
Код: Выделить всё
$('#content').animate({ left:'-1254px' }, 1000, function() { alert('Animation complete.');//действия после анимации $.getJSON('../control/index.php?id='+id,function(json){ //обрабатываем результат загрузки }); });
надо:
Код: Выделить всё
$.getJSON('../control/index.php?id='+id...$('#content').animate({ left:'-1254px' }, 1000, function() { alert('Animation complete.');//действия после анимации ...function(json){//функция после json //обрабатываем результат загрузки }); });
забыл сказать что писать результат во время анимации нельзя, ибо пока она идёт данные должны быть ещё старые.
пока писал мысля возникла:
Код: Выделить всё
var ok=0;var myobj; $.getJSON('../control/index.php?id='+id,function(json){ myobj = json //схематично, как передать объект ещё думать надо... ok++; });$('#content').animate({ left:'-1254px' }, 1000, function() { alert('Animation complete.');//действия после анимации ok++; });while(ok!=2); //останов, ждём пока ok станет равным двум//обрабатываем результат загрузки
будем пробовать
Re: JQuery css после animate
Добавлено: 16 янв 2011, 16:53
Александр
AsMasteR писал(а):вот мне это и надо
AsMasteR писал(а):забыл сказать что писать результат во время анимации нельзя, ибо пока она идёт данные должны быть ещё старые.
теперь не понимаю что тебе надо. Анимация должна быть в процессе отправки запроса? Тогда что значит второе?
Re: JQuery css после animate
Добавлено: 16 янв 2011, 18:36
AsMasteR
запрос - это одно, ответ на него приходит в переменную json
а отображение запроса на элементы экрана - другое.
можно и нужно во время анимации принимать запрос в json, или даже в свой объект, как в последнем примере (json ведь живёт только внутри функции его породившей), но вот на экран выводить нужно только после анимации!
Re: JQuery css после animate
Добавлено: 17 янв 2011, 00:10
Александр
Можно попробовать сделать так:
Перед запросом запустить бесконечную анимацию. Чтобы сделать бесконечной, можно создать функцию, например my_animate и в её конце снова вызвать my_animate(). Чтобы не тратить лишние ресурсы, можно ввести какую-то переменную, чтобы знать когда анимацию стоит завершить. Менять эту переменную после выполнения запроса.
Код: Выделить всё
function my_animate() { $("#block").animate({ opacity: .1 }, 1000, function(){ if (!requestComplete) { // запрос не завершен my_animate(); // запускаем анимацию снова } });} var requestComplete = false; // запускаем анимациюmy_animate();// выполняем запрос, когда запрос выполниться, делаем requestComplete = true// функция my_animate отработает ещё 1 раз и завершиться
Не проверял, но по логике должно работать.