JQuery css после animate

Программирование, которое не связано с API и Flash.

JQuery css после animate

Сообщение AsMasteR » 14 янв 2011, 17:38

Доброе!
Пытаюсь реализовать на JQuery вот такой вот алгос:
  1.  
  2.                        $('#content').animate({left:'-1254px'},1000);
  3.                        $('#curent img').attr({
  4.                            'src':$('#next img').attr('src'),
  5.                            'height':$('#next img').attr('height')
  6.                        });
  7.                        $('#curent h3').html($('#next h3').html());
  8.                        $('#curent #text').text($('#next #text').text());
  9.                        $('#curent b').text($('#next b').text());
  10.                        $('#content').css('left','-627px;');
  11.  

то есть хочется так: сдвигаем картинку анимашкой, потом подменяем инфу в том месте, где раньше была картинка, потом сдвигаем обратно на место без анимашки.
а на практике назад не возвращает (( подозреваю дело в том, что код за animate успел выполниться ещё до того, как анимация закончилась - не тру. как исправить?
AsMasteR

 
Автор темы
Сообщения: 13
Зарегистрирован: 03 янв 2011, 18:01
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: JQuery css после animate

Сообщение AsMasteR » 14 янв 2011, 19:07

Александр, сори не нашёл кнопку редактировать пост... [позднее и не удивительно, ведь кнопка пропадает со временем]
продолжу мысль...
да и артефакты в виде изменения поста во время анимации тоже не радуют, так что нужно как то решать..
попробую settimeout, но это костыль а не решение..
неа, костыль не работает))
ещё попутно простой вопрос, а как ловить события keypress в iframe? на локалке все работает загружаю в контакт, события с клавы не приходют... делаю вот так:
  1.  
  2.  $(window).keydown(function(event){
  3.                  switch (event.keyCode) {
  4.                     case 37: //стрелка влево
  5.                       left();
  6.                       break;
  7.                     case 39: //стрелка вправо
  8.                       right();
  9.                       break;
  10.                  }
  11.             });
  12.  
AsMasteR

 
Автор темы
Сообщения: 13
Зарегистрирован: 03 янв 2011, 18:01
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: JQuery css после animate

Сообщение Александр » 14 янв 2011, 21:42

AsMasteR писал(а):подозреваю дело в том, что код за animate успел выполниться ещё до того, как анимация закончилась

  1. $('#content').animate({
  2.    left:'-1254px'
  3.   }, 1000, function() {
  4.     // это происходит когда анимация завершилась
  5.     alert('Animation complete.');
  6.   });



В '-627px;' не нужна ";".

Сначала делаешь left:'-1254px'
Потом 'left','-627px;'
Разные значения специально? ";"

AsMasteR писал(а):а как ловить события keypress в iframe?

Наверно надо искать причину здесь
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: JQuery css после animate

Сообщение AsMasteR » 14 янв 2011, 22:24

спасибо! уже который раз выручаешь! заработало!
да, значения специально такие.

а как сделать так, чтобы наложить два асинхронных запроса логика такая:
  1. $.getJSON('../control/index.php?id='+id,
  2. >> animate <<
  3. {
  4. ...
  5. }
  6.                   function(json){
  7. обрабатываем результат загрузки
  8. });

ну то есть пока с серва инфу качаем развлекаем пользователя анимашкой в 1 секунду
AsMasteR

 
Автор темы
Сообщения: 13
Зарегистрирован: 03 янв 2011, 18:01
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: JQuery css после animate

Сообщение AsMasteR » 14 янв 2011, 23:42

c iframe почти разобрался кнопки работают, но только тогда, когда есть фокус на фрейме (( а хотелось бы всегда... чтобы взять фокус приходится тыкнуть мышкой в фрейм и вот тогда навигация с клавиатуры начинает работать))
AsMasteR

 
Автор темы
Сообщения: 13
Зарегистрирован: 03 янв 2011, 18:01
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: JQuery css после animate

Сообщение Александр » 15 янв 2011, 15:36

AsMasteR писал(а):ну то есть пока с серва инфу качаем развлекаем пользователя анимашкой в 1 секунду

1. запусти анимацию
2. начни выполнять запрос
3. по завершению запроса - заверши анимацию.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: JQuery css после animate

Сообщение AsMasteR » 16 янв 2011, 14:30

вот мне это и надо, но как? что значит заверши анимацию? анимация фиксированая - 1 секунда, а запрос может и за три секунды прийти на диалапе, суть в экономии времени пользователем
имеем:
  1. $('#content').animate({
  2.    left:'-1254px'
  3.   }, 1000, function() {
  4.     alert('Animation complete.');//действия после анимации
  5.     $.getJSON('../control/index.php?id='+id,function(json){
  6.     //обрабатываем результат загрузки
  7.     });
  8.   });

надо:
  1. $.getJSON('../control/index.php?id='+id...
  2. $('#content').animate({
  3.    left:'-1254px'
  4.   }, 1000, function() {
  5.     alert('Animation complete.');//действия после анимации
  6.     ...function(json){//функция после json
  7.     //обрабатываем результат загрузки
  8.     });
  9.   });

забыл сказать что писать результат во время анимации нельзя, ибо пока она идёт данные должны быть ещё старые.
пока писал мысля возникла:
  1. var ok=0;
  2. var myobj;
  3.     $.getJSON('../control/index.php?id='+id,function(json){
  4.           myobj = json //схематично, как передать объект ещё думать надо...
  5.           ok++;
  6.     });
  7. $('#content').animate({
  8.    left:'-1254px'
  9.   }, 1000, function() {  
  10.     alert('Animation complete.');//действия после анимации
  11.     ok++;
  12.   });
  13. while(ok!=2); //останов, ждём пока ok станет равным двум
  14. //обрабатываем результат загрузки
  15.  

будем пробовать
AsMasteR

 
Автор темы
Сообщения: 13
Зарегистрирован: 03 янв 2011, 18:01
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: JQuery css после animate

Сообщение Александр » 16 янв 2011, 16:53

AsMasteR писал(а):вот мне это и надо

AsMasteR писал(а):забыл сказать что писать результат во время анимации нельзя, ибо пока она идёт данные должны быть ещё старые.

теперь не понимаю что тебе надо. Анимация должна быть в процессе отправки запроса? Тогда что значит второе?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: JQuery css после animate

Сообщение AsMasteR » 16 янв 2011, 18:36

запрос - это одно, ответ на него приходит в переменную json
а отображение запроса на элементы экрана - другое.
можно и нужно во время анимации принимать запрос в json, или даже в свой объект, как в последнем примере (json ведь живёт только внутри функции его породившей), но вот на экран выводить нужно только после анимации!
AsMasteR

 
Автор темы
Сообщения: 13
Зарегистрирован: 03 янв 2011, 18:01
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: JQuery css после animate

Сообщение Александр » 17 янв 2011, 00:10

Можно попробовать сделать так:
Перед запросом запустить бесконечную анимацию. Чтобы сделать бесконечной, можно создать функцию, например my_animate и в её конце снова вызвать my_animate(). Чтобы не тратить лишние ресурсы, можно ввести какую-то переменную, чтобы знать когда анимацию стоит завершить. Менять эту переменную после выполнения запроса.

  1. function my_animate() {
  2.     $("#block").animate({
  3.         opacity: .1
  4.     }, 1000, function(){
  5.     if (!requestComplete) { // запрос не завершен
  6.         my_animate(); // запускаем анимацию снова
  7.     }
  8.     });
  9. }
  10.  
  11. var requestComplete = false;
  12.  
  13. // запускаем анимацию
  14. my_animate();
  15. // выполняем запрос, когда запрос выполниться, делаем requestComplete = true
  16. // функция my_animate отработает ещё 1 раз и завершиться



Не проверял, но по логике должно работать.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

След.

Вернуться в Программирование на PHP и других языках (без использования API)



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0