Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.07.2014, 22:11
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Не совсем коректная работа .animate
Всем здравствуйте.
Собственно вопрос в следующем - есть слайдер с простой сменой картинок, но с анимацией - движение картинки + увеличение - как бы эффект плавучести. Проблема в том что не корректно работает .animate - картинки движутся рывками - не могу понять в чем проблема.
Вот основной кусок кода который двигает картинки(показываю только пару эфектов для наглядности):
var cur_img = 0;//индекс текущего изображения
var hor_distance = 100;//горизонтальное расстояние, на которое перемещается картинка
var vert_distance = 100;//вертикальное расстояние, на которое перемещается картинка
var hor_zoom = 100;//горизонтальный зум, количество пикселей, на которые увеличивается картинка по горизонтали
var vert_zoom = 100;//вертикальный зум, количество пикселей, на которые увеличивается картинка по вертикали
switch(rand)
    {
       case 0: $("#slider img:eq("+cur_img+")").animate({left:"-="+hor_distance+"px",width:"+="+hor_zoom+"px"},zoom_delay); break;
        case 1: $("#slider img:eq("+cur_img+")").animate({right:"-="+hor_distance+"px",width:"+="+hor_zoom+"px"},zoom_delay); break;
        case 2: $("#slider img:eq("+cur_img+")").animate({top:"-="+vert_distance+"px",height:"+="+vert_zoom+"px"},zoom_delay); break;
        case 3: $("#slider img:eq("+cur_img+")").animate({bottom:"-="+vert_distance+"px",height:"+="+vert_zoom+"px"},zoom_delay); break;
       default: $("#slider img:eq("+cur_img+")").animate({left:"-="+hor_distance+"px",width:"+="+hor_zoom+"px"},zoom_delay); break;
    }

Полный код и как работает слайдер можно посмотреть здесь - http://1top-start.ru/slider/

Вопрос состоит в том - можно ли сделать что бы движение картинки было плавным и как это сделать.
Буду признателен за ответ.
Ответить с цитированием
  #2 (permalink)  
Старый 12.07.2014, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Bond,
вот эта строка лишняя в вашем коде
setInterval("show_img();",slider_interval);

поставьте вызов show_img во все animate --
так на всякий случай

var slider_interval = 4000;//интервал между сменой слайдов, милисекунд
var zoom_delay = 4000;//время, в течение которого происходит увеличение и перемещение картинки, милисекунд

данные секунды никогда несовпадут -- и интервал запустит лишние анимации отсюда и рывки -- можно конечно ничего не менять добавив stop(true,true) перед animate -- но лучше в таких анимациях отказ от использования setInterval
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2014, 01:28
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Извините Рони, а как тогда запускать анимацию что бы она циклически сменялась без setInterval ?
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2014, 01:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от рони
как тогда запускать анимацию что бы она циклически сменялась без setInterval
Сообщение от рони
поставьте вызов show_img во все animate
куда именно в animate --посмотрите документацию
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2014, 01:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Bond,
zoom_delayСЮДА); break;
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2014, 11:36
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Сделал правки http://1top-start.ru/slider/ но ситуация не изменилась.
Ответить с цитированием
  #7 (permalink)  
Старый 13.07.2014, 11:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Bond,
в каком браузере у вас рывки?
Ответить с цитированием
  #8 (permalink)  
Старый 13.07.2014, 12:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Bond,
тут рывки есть?
http://learn.javascript.ru/play/p8Jonb
Ответить с цитированием
  #9 (permalink)  
Старый 13.07.2014, 12:25
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Здесь тоже есть рывки http://learn.javascript.ru/play/p8Jonb в Лисе больше в хроме меньше кроме того изображение не двигается а растягивается, на самом деле они слабо заметны (видно только если на границе блока назначить точку и наблюдать за ней) но все же есть.
Ответить с цитированием
  #10 (permalink)  
Старый 13.07.2014, 13:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Bond,
невижу рывков
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Некорректная работа метода .animate Алек jQuery 4 07.08.2013 19:14
Front-end разработчик, работа удаленная или в офисе(Нижний Новгород), фуллтайм. VadimZharko Работа 8 29.04.2013 09:03
Ввод нескольких параметров .animate за раз zebra741258963 jQuery 4 14.12.2011 03:33
Постоянная работа / Front-end / Москва kooper Работа 4 29.09.2011 22:06
Постоянная работа скрипта Furio29 Общие вопросы Javascript 0 05.05.2011 17:40