Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2014, 14:31
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

движение текста при нажатии кнопки jquery
Здравствуйте есть текст в родительском блоке и есть кнопка, как заставить текст двигаться вправо при нажатой кнопке и прекратить движение при том что кнопку мыши перестали удерживать

<div id="parent">
   <div class="submenu">
        <a style="display:inline-block;" href="/main/pages/materials/">Статьи</a>
        <a style="display:inline-block;"href="/main/pages/materials/">Архив</a>
	<a style="display:inline-block;"href="/main/pages/materials/">Статьи</a>
	<a style="display:inline-block;"href="/main/pages/materials/">Архив</a>
	<a style="display:inline-block;"href="/main/pages/materials/">Статьи</a>
   </div>
</div>
 <button id="btn">Кнопка</button>
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2014, 20:26
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от imediasun1
как заставить текст двигаться вправо при нажатой кнопке и прекратить движение при том что кнопку мыши перестали удерживать
На mousedown запустить setInterval()... На mouseup его прибить...
Ответить с цитированием
  #3 (permalink)  
Старый 26.01.2014, 14:34
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

а подробнее с кодом всю процедуру не могли бы преподать? в том числе как задать движение тексту и его остановку?
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2014, 02:32
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Что то на подобии этого:

$(document).ready(function(){
			var timer;
			$('#btn').mousedown(function(){
				function goGO(){
					$('.submenu').animate({'left':'+=40px'})
				}
				timer = setInterval(goGO,100);
				});
			
			$('#btn').mouseup(function(){
				clearInterval(timer);
			});
});
Ответить с цитированием
  #5 (permalink)  
Старый 27.01.2014, 08:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от imediasun1
как задать движение тексту
http://javascript.ru/blog/Andrej-Par...cii-JavaScript
Ответить с цитированием
  #6 (permalink)  
Старый 27.01.2014, 15:01
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

hfts_rider,
прерывисто и кнопка сколько секунд зажата столько секунд еще потом текст двигается а надо чтобы сразу отпускало? может еще варианты есть текст двигается прерывисто из за того что анимация задана на определенное расстояние влево если бы расстояние как то высчитывалось от нажатия кнопки было бы плавно и там какой то стопер другой надо придумывать
http://learn.javascript.ru/play/gzrspksa,
Слишком объемная инфа и по js, я js пока не знаю если бы конкретно по такому движению, еще вник бы, но все равно спасибо Хотя вникаю потихоньку но на конкретном примере из собственной жизни лучше научиться можно

Последний раз редактировалось imediasun1, 27.01.2014 в 15:13.
Ответить с цитированием
  #7 (permalink)  
Старый 27.01.2014, 16:39
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

Нашел решение в английском интернете http://learn.javascript.ru/play/s2dwbc
но есть один нюанс помогите осуществить, когда при движении влево правый край текста заканчивается и сравнивается с правым краем родительского блока нужно прекратить движение так же и если слева при движении вправо то есть чтобы текст не смещался вправо и влево если дальше текста нет, я не знаю понятно ли выразился но можно логично понять если это меню то ему нет смысла перемещаться дальше если все уже открыто

Последний раз редактировалось imediasun1, 27.01.2014 в 17:33.
Ответить с цитированием
  #8 (permalink)  
Старый 27.01.2014, 17:32
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Да, чем дольше держишь тем дольше ехать будет...
Не совсем корректно..

Сообщение от imediasun1
можно ли сделать так чтобы анимация происходила просто влево а не на 40 пикселей пока кнопка зажата так будет плавнее
$('.submenu').animate({'left':'+=40px'})


Там где 40, можешь поставить пару пикселей,

mouseStillDown = setInterval(do_something, 100);


Тут где 100, это миллисекунды, можешь их уменьшить.
Пробуй..

Но все же это не лучший вариант, мне кажется нужно тут что то менять, потому что "mouseup" срабатывает только после завершения "mousedown" в котором интервал будет продолжатся в зависимости от зажатой кнопки и становится в очередь все дольше и дольше.

Если бы было просто при нажатии на кнопку запустить\остановить, а тут нужно учитывать что кнопка именно зажата.
Ответить с цитированием
  #9 (permalink)  
Старый 28.01.2014, 01:20
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

сделал, но есть маленький нюанс приглашаю всех кто может помочь в песочницу

Последний раз редактировалось imediasun1, 29.01.2014 в 18:05.
Ответить с цитированием
  #10 (permalink)  
Старый 29.01.2014, 17:54
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

Возникла проблема
это меню в котором подменю ездит вправо и влево . При наведении на кнопки .controls li меню должно ехать взависимости от класса этого li.
Все нормально функционировало когда было одно подменю но когда их появилось много меню перестало реагировать на отведение мыши от этого li моментально, и еще появилась проблема - меню не останавливается когда достигнет цифр 13 и 1 в соответствии от стороны остановки?, помогите кто может вот песочница http://learn.javascript.ru/play/ZOzAW

Последний раз редактировалось imediasun1, 29.01.2014 в 18:06.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии граница кнопки выделяется оранжевым alexan0308 Мобильный JavaScript 3 12.09.2013 19:37
Изменение цвета текста кнопки и цвета кнопки при нажатии Setta jQuery 22 31.07.2013 17:48
При нажатии и удержании мыши заменяется картинка Webroller Events/DOM/Window 9 26.05.2010 16:00
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 18:02
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 13:36