Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   движение текста при нажатии кнопки jquery (https://javascript.ru/forum/dom-window/44592-dvizhenie-teksta-pri-nazhatii-knopki-jquery.html)

imediasun1 25.01.2014 14:31

движение текста при нажатии кнопки 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>

ksa 25.01.2014 20:26

Цитата:

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

На mousedown запустить setInterval()... На mouseup его прибить...

imediasun1 26.01.2014 14:34

а подробнее с кодом всю процедуру не могли бы преподать? в том числе как задать движение тексту и его остановку?

hfts_rider 27.01.2014 02:32

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

$(document).ready(function(){
			var timer;
			$('#btn').mousedown(function(){
				function goGO(){
					$('.submenu').animate({'left':'+=40px'})
				}
				timer = setInterval(goGO,100);
				});
			
			$('#btn').mouseup(function(){
				clearInterval(timer);
			});
});

ksa 27.01.2014 08:32

Цитата:

Сообщение от imediasun1
как задать движение тексту

http://javascript.ru/blog/Andrej-Par...cii-JavaScript

imediasun1 27.01.2014 15:01

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

imediasun1 27.01.2014 16:39

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

hfts_rider 27.01.2014 17:32

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

Цитата:

Сообщение от imediasun1
можно ли сделать так чтобы анимация происходила просто влево а не на 40 пикселей пока кнопка зажата так будет плавнее

$('.submenu').animate({'left':'+=40px'})


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

mouseStillDown = setInterval(do_something, 100);


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

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

Если бы было просто при нажатии на кнопку запустить\остановить, а тут нужно учитывать что кнопка именно зажата.

imediasun1 28.01.2014 01:20

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

imediasun1 29.01.2014 17:54

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


Часовой пояс GMT +3, время: 04:42.