Реакция на нааведение мыши
Доброго времени суток! Интересует вопрос: есть событие hover, как сделать чтобы оно срабатывало только после пребывания там мыши пару секунд, то есть если просто провести ничего не происходило?
|
|
Makkssimka,
Вариант ...
<!DOCTYPE html>
<html>
<head>
<style>
div.out{width:40%;height:120px;margin:0 15px;font-size:20px;background:#FF0;text-align:center;float:left}
p{line-height:4em;margin:0;padding:0}
</style>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="out enterleave">
<p>нет никого</p>
</div><div class="out enterleave">
<p>нет никого</p>
</div><div class="out enterleave">
<p>нет никого</p>
</div>
<script>
var timer;
$("div.enterleave").mouseenter(function(){
$("p",this).text("кто то пришёл но я сплю");
window.clearTimeout(timer);
var div = this;
timer = window.setTimeout(function ()
{
$("p", div).text("Какова фига нада").css({'background-color':'#FF0000','color' : '#FFFFFF','font-size': '30px'})
}, 1500)
}).mouseleave(function(){
window.clearTimeout(timer);
$("p",this).text("кто то был").css({'background-color':'#FFFF00','color' : '#000000','font-size': '20px'});
});
</script>
</body>
</html>
|
рони, а как это прикрутить к этому скрипту:
$(document).ready(function() {
$('.fcat img').hover(
function(){
$(this).css("z-index", "10");
$(this).animate({height: 230, width: 230, left: "-=15", top: "-=15"}, 300, function() {
$(this).next('#autorName').fadeIn(300);
$(this).nextAll('.reit').fadeIn(300);
});
}, function (){
$(this).animate({height: 200, width: 200, left: "+=15", top: "+=15"}, 300, function() {
$(this).css("z-index", "0");
$(this).next('#autorName').fadeOut(300);
$(this).nextAll('.reit').fadeOut(300);
});
});
});
</script>
|
Makkssimka,
минимально живой хтмл можно? |
Makkssimka, а носки за тебя не постирать? Все что тебе осталось - прописать свой селектор и удалить демонстрационные плюшки.
рони, а зачем это F = !1 ? И зачем именовать функцию, передаваемую в setTimout? |
Цитата:
|
danik.js, носки стирать не надо, если бы у меня получилось я бы не писал!
рони, вот код:
<div id="fcatwrap">
<?php
while ($rowFot = mysql_fetch_array($resultFot)) {
echo '<div class="fcat"><a href="slide.php?numberIm='.$numberFot.'&&catName='.$foto.'"><img src="../'.$rowFot['adresfilemin'].'" width="200" height="200"><div id="autorName">Автор: '.$rowFot['user'].'</div><div id="reiting'.$numberFot.'" class="reit"><input type="hidden" name="val" value="'.$rowFot['reiting'].'"/></div></img></a></div>
<script>$("#reiting'.$numberFot.'").rating({readOnly: "true"});</script>';
$numberFot++;
}
?>
</div>
|
Makkssimka,
эхх живой это живой... картинки видны теги целы ...
$(document).ready(function () {
var timer;
$(".fcat img").mouseenter(function () {
timer = window.setTimeout(function () {
$(".fcat img").css("z-index", "10");
$(".fcat img").animate({
height: 230,
width: 230,
left: "-=15",
top: "-=15"
}, 300, function () {
$(".fcat img").next('#autorName').fadeIn(300);
$(".fcat img").nextAll('.reit').fadeIn(300);
});
}, 3000)
}).mouseleave(function () {
window.clearTimeout(timer)
$(this).animate({
height: 200,
width: 200,
left: "+=15",
top: "+=15"
}, 300, function () {
$(this).css("z-index", "0");
$(this).next('#autorName').fadeOut(300);
$(this).nextAll('.reit').fadeOut(300);
});;
});
});
|
| Часовой пояс GMT +3, время: 16:41. |