Форум

strengerst · #1 (**permalink**) 29.07.2013, 14:32

Сделал выпадающее меню с эффектами анимации на javascript. При наведении курсора мышки блок плавно выезжает, а как сделать что бы при отвода курсора меню сразу же заезжала. При чем не доехавшии до конечной позиции to-500px.

var g=document.getElementById("example");

function hou(){	function delta(progress) {  
    return progress;}
	function delta(progress) {  
    return progress;} 
	var element = document.getElementById("example");
var from = 0; // Начальная координата X
var to = 500; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime();// Время старта
setTimeout(function() {
    var now = (new Date().getTime()) - start;// Текущее время
    var progress = now / duration; // Прогресс анимации
    var result = (to - from) * delta(progress) + from;
	element.style.display="block"; 
    element.style.top = result + "px";
    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);}

<ul><a href="#"    onmouseover="hou()">Меню</a>
<ul id="example" >
<li >Меню 1</li>
<li>Меню 2</li>
<li>Меню 3</li></ul></ul>

skrudjmakdak · #2 (**permalink**) 29.07.2013, 14:46

используйте jquery, ибо с ним код сократиться 2 раза:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

</head> 
<body> 
<ul><a href="#">Меню</a>
<ul id="example" style="position: relative; height: 0px;">
<li >Меню 1</li>
<li>Меню 2</li>
<li>Меню 3</li></ul></ul>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
var e = $('#example');
$('a').mouseover(function()
	{
	$(e).stop().animate(
		{
		top: 300
		}, 1000);
	}).mouseout(function()
	{
	$(e).stop().animate(
		{
		top: 0
		}, 1000);
	});
	</script>
</body> 
</html>

рони · #3 (**permalink**) 29.07.2013, 15:04

strengerst,

но нужен mouseenter и mouseleave чтобы воспользоваться таким меню

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #example{
    position: relative;
  }
  </style>
</head>

<body>
<ul><a href="#"    onmouseover="hou(0)"  onmouseout="hou(-500)" >Меню</a>
<ul id="example" style="top: -500px">
<li >Меню 1</li>
<li>Меню 2</li>
<li>Меню 3</li></ul></ul>
<script>
var g;
function hou(to){
    window.clearTimeout(g)
	function delta(progress) {
    return progress;}
	var element = document.getElementById("example");
var from = parseFloat(element.style.top) ; // Начальная координата X
//var to = to; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime();// Время старта
g = setTimeout(function() {
    var now = (new Date().getTime()) - start;// Текущее время
    var progress = now / duration; // Прогресс анимации
    var result = (to - from) * delta(progress) + from;
	element.style.display="block";
    element.style.top = result + "px";
    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);}

</script>
</body>

strengerst · #4 (**permalink**) 29.07.2013, 19:52

Спасибо большое всем. Буду пробовать.

Вот первый вариант на jquery то что нужно, но а как такое можно реализовать javascript. то есть что бы уберешь курсор мышки и меню возвращалась с того момента с которого убрал, не доезжая до конца 500px. А допустим убрал в тот момент когда top было 310 и меню от 310 возвращается верх на 0.

ksa · #5 (**permalink**) 30.07.2013, 09:46

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

но а как такое можно реализовать javascript

Как вариант...
- Иметь 2 функции типа "открывает", "закрывает" и 2 переменные для ИД setInterval()
- Для открытия "убивать" "закрытие" и запускать "открытие"
- Для закрытия "убивать" "открытие" и запускать "закрытие"

strengerst · #6 (**permalink**) 30.07.2013, 19:54

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

используйте jquery, ибо с ним код сократиться 2 раза:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

</head> 
<body> 
<ul><a href="#">Меню</a>
<ul id="example" style="position: relative; height: 0px;">
<li >Меню 1</li>
<li>Меню 2</li>
<li>Меню 3</li></ul></ul>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
var e = $('#example');
$('a').mouseover(function()
	{
	$(e).stop().animate(
		{
		top: 300
		}, 1000);
	}).mouseout(function()
	{
	$(e).stop().animate(
		{
		top: 0
		}, 1000);
	});
	</script>
</body> 
</html>

Все классно работает ну а как сделать чтобы при наведении свойство в css display:none; становилось display:block; а при отведении тока когда блок вернеться в изначальную позицию стоновился опять none. Я пытался делать так:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
var e = $('#example'); $(e).css({display:'none'})
$('a').mouseover(function()
	{$(e).stop().animate({top: 300}, 1000); }).css('display','block').mouseout(function(){$(e).stop().animate({
top: 0}, 1000).css('display','none');});
	</script>

Но при таком коде когда уберешь мышку блок сразу становиться невидимым, не успевая вернуться в изначальную позицию.

рони · #7 (**permalink**) 30.07.2013, 20:15

strengerst, в animate есть
callback — функция, которая будет вызвана после завершения анимации. в неё и добавляйте css.

strengerst · #8 (**permalink**) 30.07.2013, 20:23

О спасибо попробую.

strengerst · #9 (**permalink**) 31.07.2013, 10:27

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
var e = $('#example'); $(e).css({display:'none'})
$('a').mouseover(function()
	{$(e).stop().animate({top: 300}, 1000); }).css('display','block').mouseout(function(){$(e).stop().animate({
top: 0}, 1000).callback.css('display','none');});
	</script>

Так что ли.

рони · #10 (**permalink**) 31.07.2013, 10:32

strengerst,

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

top: 0}, 1000 СЮДЫ!!! ).callback.css('display'

Форум

Справочник

Discord чат

Курсы javascript