Выдержка Mouseenter
Есть такая функция
$('#assessment').live("mouseenter", function()
{
$('.labels_hint').animate({ opacity: "toggle" }, 500);
});
т.е когда наводим мышь на "assessment" появляется "labels_hint". Проблема в том что это происходит сразу как только наведешь мышь, а мне нужно так чтобы функция выполнялась только когда подержишь мышь на "assessment" 5 секунд. setTimeout() в этом случая как я понимаю не подходит. Подскажите пожалуйста, как это реализовать... |
Цитата:
<div id="el1">Текст<span id="el2" style="visibility: hidden; float: right;">Исчезающий текст</span></div>
<script>
div= document.getElementById("el1");
span= document.getElementById("el2");
interv= false;
div.onmouseover= function(){
interv= setTimeout(function(){span.style.visibility=""; interv= false}, 1000);
};
div.onmouseout= function(){
if (interv !== false)
clearTimeout(interv)
else {
span.style.visibility="hidden";
}
};
</script>
|
Спасибо
|
можно .delay() использовать
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script>
$(function(){
var lh = $('.labels_hint');
$('#assessment').hover(function () {
lh.stop(true).delay(5000).animate({opacity: 1}, 500);
},
function () {
lh.stop(true).animate({opacity: 0}, 500);
});
});
</script>
</head>
<body>
<div id="assessment">здесь держим мышь 5 секунд</div>
<div class="labels_hint" style="opacity:0">labels hint</div>
</body>
</html>
|
Вообще то немного не то, функция все равно выполняется если я наведу мышь и быстро уберу с объекта, а мне нужно только когда некоторое время держишь мышь непосредственно на нем.
|
Вот так, сообщение не появится если вы уберёте мышь из области.
При наведении запускается таймер, а если мышь убрать он сбрасывается. setTimeout - для вашего случая идеальный вариант, просто использовать его надо в паре с clearTimeout. <!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
</head>
<body>
<div id="box"> Наведите на меня, и подождите 5 секунд. </div>
<script type="text/javascript">
var tout;
$(document).ready(function(){
// обработка при наведении
// $('#box').mouseenter(function(){ //mouseenter тоже работает
$('#box').mouseover(function(){
//создаём таймер который ждёт 5 секунд и запускает ваш метод
tout=setTimeout(function(){
// здесь расположена вся ваша логика
// которая запускается в случае если пользователь держит указатель 5 секунд.
alert("Вы продержали 5 секунд");
},5000);
})
// обработка в случае если мышь выводится из области
.mouseout(function(e){
//унечтожаем таймер, дабы он не выполнил действие по истечению 5 секунд
clearTimeout(tout)
})
});
</script>
</body>
</html>
|
DjDiablo, а, собственно, зачем вы это второй раз написали?)
|
Да ё-моё.
Я последний ответ посмотрел, а предыдущие нет. А ты вообще в каждой бочке затычка :) Только зайду на форум, а трикадин уже везде отметился. У меня уже дефицит общения начинается :D У меня даже есть теория на этот счёт. Когда на форуме появляется новый вопрос, у тебя в комнате завывает сирена, ты бросаешь всё на свете и бежишь отвечать. :D А когда приползаю я, весь урожай общественного признания уже собран. |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 05:01. |