Форум

bpystep · #1 (**permalink**) 21.11.2011, 19:01

<li><a href="#" onMouseOver="gogogo(this,29,0)" onMouseOut="gogogo(this, 60, -1)"><img src="css/images/q.png" width="100" height="20"></a></li>

function gogogo(node, i, sv) {
	if (sv == 0) {
	setTimeout(function() {node.style.left = i+1; i++; if (i<=60) gogogo(node, i, 0);},8);
	}
	else {
		setTimeout(function() {node.style.left = i-1; i--; if (i>=29) gogogo(node, i, -1);},8);
	}
}

Проблема в том, что при изменении положения указателя мыши начинает работать как if так и else. Думаю что проблему можно решить путем выделения определенной прямоугольной области, при наведении на который будет работать if, а за пределами есстественно else.
Просьба помочь оптимизировать или подкинуть какие-нибудь другие идеи.

bpystep · #2 (**permalink**) 22.11.2011, 14:27

кто-нибудь ответит?

Pavel M. · #3 (**permalink**) 22.11.2011, 14:49

что-то типа этого можно использовать
пример на jQuery
нужно навести на картинку

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>demo</title>
  
	<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>

	<script type='text/javascript'>

	$(window).load(function(){

		$('div a').hover(
			function () {
				$(this).stop().animate({'margin-left': 30}, 300);
			},
			function () {
				$(this).stop().animate({'margin-left': 0}, 300);
			}
		);

	});

	</script>

</head>
<body>

  <div>
    <a href="#"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></a>
  </div>

</body>
</html>

bpystep · #4 (**permalink**) 22.11.2011, 15:00

не силен в jQuery, и JS только начал изучать.
можете пояснить следующие моменты?
1. $(window).load(function() -- здесь мы подгружаем новую функцию?
2. $(this) - это $('div a')?
3. $('div a').hover - для чего hover?

p.s. благодарю.

Pavel M. · #5 (**permalink**) 22.11.2011, 15:51

Сообщение от bpystep

1. $(window).load(function() -- здесь мы подгружаем новую функцию?
2. $(this) - это $('div a')?
3. $('div a').hover - для чего hover?

1. ждем загрузки всей страницы со всеми элементами

2. в этом случае - да

3. http://api.jquery.com/hover/

bpystep · #6 (**permalink**) 22.11.2011, 16:01

Сообщение от Pavel M.

1. ждем загрузки всей страницы со всеми элементами

2. в этом случае - да

3. http://api.jquery.com/hover/

спасибо)

pagemaster · #7 (**permalink**) 08.04.2013, 22:45

Здравствуйте!
Тема уже старая, но у меня возник похожий вопрос, помогите пожалуйста.
У меня есть круг (порезанный на куски) и когда я навожу на определенный кусок, он должен отодвигаться... Подскажите как это прописать? Со случаем вправо я уже разобрался)) методом тыка пробовал таким же образом задавать отступ вверх и вниз, но ничего не получается...

Заранее благодарен!

tsigel · #8 (**permalink**) 09.04.2013, 09:30

А случай "вправо" - это какой случай?)

Четче сформулируйте вопрос, выложите простой кусок html и ваш скрипт.

pagemaster · #9 (**permalink**) 09.04.2013, 16:20

<!DOCTYPE html>
	<html>
	<head>
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	    <title>demo</title>
	   
	    <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
	 
	    <script type='text/javascript'>
	 
	    $(window).load(function(){
	 
	        $('div a').hover(
	            function () {
	                $(this).stop().animate({'margin-left': 50}, 300);
		},
	            function () {
	                $(this).stop().animate({'margin-left': 0}, 300);
		}
	        );
	 
	    });
	 
	    </script>
	 
	</head>
	<body>
	 
	  <div>
	    <a href="#"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></a>
	  </div>
	 
	</body>
	</html>

В данном случае прописывается margin-left 50 и изображение движется в право (так как отступ то левый) на 50 пикселей. Я пытался написать margin: 0 50 50 0; чтобы изображение двигалось вправо и вверх, но почему то не работает... подскажите как правильно прописывать в jQuery отступы, чтобы все работало) ну или я думал что может стоит прописывать не отступы, а задавать координаты относительно страницы, если это возможно, то подскажите как =) буду очень благодарен

tsigel · #10 (**permalink**) 09.04.2013, 16:58

$(this).stop().animate({
   'margin-left': 0,
   'margin-top': '20px'
}, 300);

Форум

Справочник

Discord чат

Курсы javascript