Выполнение кода только один раз в несколько секунд.
Добрый день. Недавно составил несколько строк для плавного раскрывания меню. Всё хорошо работает, только смущает одна вещь - если мышкой много раз провести по элементу, то он будет скакать вверх-вниз столько раз, сколько мы провели по нему мышью. Я пробовал использовать setTimeout, но код вообще на него не реагировал. В общем прошу помочь мне и сделать замечания, если что-то сделано неверно и можно сделать лучше. Спасибо за внимание.
<script type="text/javascript">
$(document).ready(function () {
$('.menu li').hover(
function() {
$('ul', this).slideDown(400);
},
function() {
$('ul', this).slideUp(400);
}
);
});
$(".deeper").live("mouseover", function() {
$('.deeper a').css('color','#707070');
})
$(".menu").live("mouseout", function() {
$('.deeper a').css('color','#ffffff');
})
</script>
|
Цитата:
$('.menu li').hover(
function() {
$(this).find('ul').stop().slideDown(400);
},
function() {
$(this).find('ul').stop().slideUp(400);
}
);
|
Спасибо за ответ с кодом, но приведённый код отказывается работать. Я попробовал сделать так -
$('.menu li').hover(
function() {
$('ul', this).stop().slideDown(400);
},
function() {
$('ul', this).stop().slideUp(400);
}
);
});
Такой код делает то, что нужно, но при наведении на элемент раз 5-6 элемент просто не раскрывается. |
Нужно уменьшить время и всё будет хорошо. Думаю так и оставлю, спасибо большое)
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.menu > li > ul {
display: none;
}
</style>
<script type="text/javascript">
$(function (){
$('.menu li').hover(
function() {
$(this).find('ul').stop().slideDown(400);
},
function() {
$(this).find('ul').stop().slideUp(400);
}
);
});
</script>
</head>
<body>
<ul class='menu'>
<li>Item 1
<ul>
<li>Item 1 1</li>
<li>Item 1 2</li>
<li>Item 1 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2 1</li>
<li>Item 2 2</li>
<li>Item 2 3</li>
</ul>
</li>
</ul>
</body>
</html>
Все там работает! |
Да, всё работает. Не понимаю... этот код дома работает, а на работе нет... При чём дома кусок кода с
$(".deeper").live("mouseover", function() {
$('.deeper a').css('color','#707070');
})
$(".menu").live("mouseout", function() {
$('.deeper a').css('color','#ffffff');
})
вообще перестал менять цвет. Есть мысль, что это зависит от версии js... Но как тогда что-то писать, если из за таких незначительных изменений может всё накрыться медным тазом? |
Цитата:
live() - устаревший метод on() - новый |
Коду без разницы. Меняю <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> на <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> или "latest" и перекраска текста не работает. Хоть я там .on ставлю, хоть нет. К стати ksa Вам большое спасибо, очень помогли)
|
| Часовой пояс GMT +3, время: 22:23. |