Помогите с анимацией выпадающего меню
Сделал выпадающее меню с эффектами анимации на 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> |
используйте 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>
|
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>
|
Спасибо большое всем. Буду пробовать.:) Вот первый вариант на jquery то что нужно, но а как такое можно реализовать javascript. то есть что бы уберешь курсор мышки и меню возвращалась с того момента с которого убрал, не доезжая до конца 500px. А допустим убрал в тот момент когда top было 310 и меню от 310 возвращается верх на 0.
|
Цитата:
- Иметь 2 функции типа "открывает", "закрывает" и 2 переменные для ИД setInterval() - Для открытия "убивать" "закрытие" и запускать "открытие" - Для закрытия "убивать" "открытие" и запускать "закрытие" |
Цитата:
<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>
Но при таком коде когда уберешь мышку блок сразу становиться невидимым, не успевая вернуться в изначальную позицию. |
strengerst, в animate есть
callback — функция, которая будет вызвана после завершения анимации. в неё и добавляйте css. |
О спасибо попробую.
|
<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>
Так что ли. |
strengerst,
Цитата:
|
strengerst,
пример callback в animate |
<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>
При такой записи блок исчезает не успев доехать до top 0;Я еще так пытался но тоже нечего не получаеться
$(document).ready(function(){
var callbacks = $.Callbacks();
callbacks.add(function s (){$(e).css('display','none');})
var e = $('#example'); $(e).css('opacity',0);
$('a').mouseover(function(){
$(e).stop().fadeTo(16,1).animate({top:300}, 1000);})
$('a').mouseout(function(){
$(e).stop().animate({top: 0}, 1000).callbacks.fireWith(s);})})
|
strengerst,
посмотрите пример -то $('a').mouseout(function(){ $(e).stop().animate({top: 0}, 1000, function () { $(e).css('opacity',0)// или что вам там надо может $(this).css('display','none') }) |
Спасибо на коннц то получилось просто до меня пока дойдет.
|
| Часовой пояс GMT +3, время: 09:27. |