PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Jquery. Смещение изображения с задержкой.

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

grefon	Отправлено: 11 Февраля, 2011 - 14:39:59
Частый посетитель Покинул форум Сообщений всего: 823 Дата рег-ции: Нояб. 2010 Помог: 32 раз(а)	Есть изображение 80 на 400 точек. Представляет из себя 5 склеенных кадров по вертикале. Это изображение находится в блоке с overflow:hidden размерами 80 на 80 точек. Этот блок находится в таблице, при наведении на которую нужно сделать смещение изображения, чтобы получилась анимация. CODE (html): скопировать код в буфер обмена <div class="sv" style="margin-bottom:10px;"> <table cellpadding="0" cellspacing="0" class="tab_brand_choice"> <tr> <td class="tab_brand_choice_img"><div class="zoom_rims"><img src="make_your_logo.jpg" style="width:80px; height:400px;" alt="" /></div></td> <td>Текст</td> </tr> </table> </div> Нужно чтобы при наведении на .tab_brand_choice изображение в блоке zoom_rims сдвинулось вверх на 80 точек, потом пауза на 50мс, потом сдвиг на 160, пауза, 240 точек, пауза, 320 точек. Когда мышку убираем с таблицы, изображение смещается вниз. Все это дело должно обрабатываться jquery. То есть код должен быть приблизительно таким: CODE (javascript): скопировать код в буфер обмена $(document).ready( function() { $(".tab_brand_choice").mouseover( function() { img = $(this).find(".zoom_rims img"); img.delay(50).animate({marginTop:-80},0); img.delay(50).animate({marginTop:-160},0); img.delay(50).animate({marginTop:-240},0); img.delay(50).animate({marginTop:-320},0); }).mouseout( function() { img.delay(50).animate({marginTop:-240},0); img.delay(50).animate({marginTop:-160},0); img.delay(50).animate({marginTop:-80},0); img.delay(50).animate({marginTop:0},0); }); }); С помощью такого (признаюсь, не очень хорошего) подхода эффект получается такой, как мне нужен. Но, при проведении по таблицы несколько раз анимация отрабатывает все mouseover-mouseout. Пробовал ставить функцию stop() - тогда не срабатывает delay(50). Если поставить на анимацию {duration:0,queue:false} - эфект такой же как и при функции stop(), задержки нет. Как быть и что делать? Может можно как-то доработать этот код или нужно вообще изменить подход? ----- ____________________________________________________________________ Ну как то так, наверное. http://grefon[dot]com

grefon	Отправлено: 11 Февраля, 2011 - 20:23:18
Частый посетитель Покинул форум Сообщений всего: 823 Дата рег-ции: Нояб. 2010 Помог: 32 раз(а)	Написал вот такой скрипт. Может кому-то пригодится! Работает просто на ура!!! CODE (javascript): скопировать код в буфер обмена $(document).ready( function() { move = function(img,napravlenie,val){ if (napravlenie == "L" && val > -321){ img.css('background-position', '0 ' + val); val -= 80; setTimeout(function(){ move(img,"L",val); },50); } else if (napravlenie == "R" && val < 1){ img.css('background-position', '0 ' + val); val += 80; setTimeout(function(){ move(img,"R",val); },50); } }; $(".tab_brand_choice").mouseenter( function(e) { var img = $(this).find(".zoom_rims"); move(img,'L',-80); }); $(".tab_brand_choice").mouseleave( function(e) { var img = $(this).find(".zoom_rims"); move(img,'R',-240); }); }); ----- ____________________________________________________________________ Ну как то так, наверное. http://grefon[dot]com

JustUserR	Отправлено: 12 Февраля, 2011 - 14:14:03
Активный участник Покинул форум Сообщений всего: 8715 Дата рег-ции: Июнь 2009 Помог: 17 раз(а)	grefon пишет: Может можно как-то доработать этот код или нужно вообще изменить подход? В качестве возможного альтернативного варианта решения предполагаемой задачи допустимо использование дополнительных информационных полей осуществляющих хранение состояния текущего уровня смещения изображения и управляющего параметра для остановки исполняемой инстанции функции - в таком случае при осуществлении переключения целевого дейтсвия в процессе его исполнения возможно проведение его стабилизации и обеспечения обратного события ----- Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.