Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.07.2013, 13:32
Аватар для strengerst
Аспирант
Отправить личное сообщение для strengerst Посмотреть профиль Найти все сообщения от strengerst
 
Регистрация: 03.02.2012
Сообщений: 82

Помогите с анимацией выпадающего меню
Сделал выпадающее меню с эффектами анимации на 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>
Ответить с цитированием
  #2 (permalink)  
Старый 29.07.2013, 13:46
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

используйте 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, 14:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,521

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>

Последний раз редактировалось рони, 29.07.2013 в 14:06.
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2013, 18:52
Аватар для strengerst
Аспирант
Отправить личное сообщение для strengerst Посмотреть профиль Найти все сообщения от strengerst
 
Регистрация: 03.02.2012
Сообщений: 82

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

Последний раз редактировалось strengerst, 29.07.2013 в 19:35.
Ответить с цитированием
  #5 (permalink)  
Старый 30.07.2013, 08:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,442

Сообщение от strengerst
но а как такое можно реализовать javascript
Как вариант...
- Иметь 2 функции типа "открывает", "закрывает" и 2 переменные для ИД setInterval()
- Для открытия "убивать" "закрытие" и запускать "открытие"
- Для закрытия "убивать" "открытие" и запускать "закрытие"
Ответить с цитированием
  #6 (permalink)  
Старый 30.07.2013, 18:54
Аватар для strengerst
Аспирант
Отправить личное сообщение для strengerst Посмотреть профиль Найти все сообщения от strengerst
 
Регистрация: 03.02.2012
Сообщений: 82

Сообщение от 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, 19:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,521

strengerst, в animate есть
callback — функция, которая будет вызвана после завершения анимации. в неё и добавляйте css.
Ответить с цитированием
  #8 (permalink)  
Старый 30.07.2013, 19:23
Аватар для strengerst
Аспирант
Отправить личное сообщение для strengerst Посмотреть профиль Найти все сообщения от strengerst
 
Регистрация: 03.02.2012
Сообщений: 82

О спасибо попробую.
Ответить с цитированием
  #9 (permalink)  
Старый 31.07.2013, 09:27
Аватар для strengerst
Аспирант
Отправить личное сообщение для strengerst Посмотреть профиль Найти все сообщения от strengerst
 
Регистрация: 03.02.2012
Сообщений: 82

<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, 09:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,521

strengerst,

Сообщение от strengerst
top: 0}, 1000 СЮДЫ!!! ).callback.css('display'
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход между элементами выпадающего меню Digan jQuery 3 10.10.2012 20:03
Скрипт выпадающего меню vadimon Элементы интерфейса 3 12.09.2012 22:06
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 13:36
Сокращение списка выпадающего меню. Predatorbbs Элементы интерфейса 3 22.11.2010 14:23
помогите с меню Ribt Общие вопросы Javascript 0 20.09.2008 07:11