пауза перед .hide Jquery
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#ed1").hover( function() {
jQuery("#ed1pod").css('display','block');
}, function() {
jQuery("#ed1pod").hide();
});
});
</script>
при наведении на div#ed1 открывается div#ed1pod когда уберешь мышку с div#ed1 закрывается div#ed1pod мне над сделать чтоб оно не сразу закрывалось а через секунд 5-10 |
Можно вместо
jQuery("#ed1pod").hide();
поставить
jQuery("#ed1pod").delay(2000).fadeOut();
delay(2000) - это задержка на 2 секунды. |
спасибо - то что нужно:D
|
а как сделать еще что пока курсор над ed1pod div#ed1pod не закрывался?
|
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var t;
$('#ed1, #ed1pod').hover(function() {
clearTimeout(t);
$('#ed1pod').show();
}, function() {
t = setTimeout(function() {$('#ed1pod').hide();}, 2000);
});
});
</script>
<style>
#ed1 {
height: 20px; width: 150px;background-color: red;
}
#ed1pod {
height: 50px; width: 150px;background-color: black;display: none;
}
</style>
</head>
<body>
<div id="ed1">Наведи</div>
<div id="ed1pod"></div>
</body>
</html>
Пока курсор находится над #ed1 или #ed1pod, то #ed1pod будет виден, иначе через 2 секунды он будет скрыт. |
спасибо):dance:
|
Подскажите, а к списку из неск. блоков можно применить?
чтобы пауза была, когда курсор убираем.
$('nav li').hover(function() {
$(this).addClass('hover').siblings().removeClass('hover');
});
<nav><ul>
<li>text<span>info</span></li>
<li>text<span>info</span></li>
<li>text<span>info</span></li>
</ul></nav>
|
alexscus,
<style type="text/css">
nav li{
transition: background-color 0s ease-in-out .3s;
}
nav li:hover{
background-color: #FF0000;
transition-delay: 0s
}
</style>
<nav>
<ul>
<li>text<span>info</span></li>
<li>text<span>info</span></li>
<li>text<span>info</span></li>
</ul>
</nav>
|
Спасибо, но немного не то, тут задержка нужна к меню при переходе на другой пункт.
моя вина, надо было мне сразу пример показать - > песочница
$('nav li').hover(function() {
$(this).addClass('hover').siblings().removeClass('hover');
});
<nav><ul> <li>text<span>1 info</span></li> <li>text<span>2 text text</span></li> <li>text<span>3 text text</span></li> <li>text<span>4 text </span></li> <li>text<span>5 text text text text</span></li> <li>text<span>6 text text</span></li> </ul></nav>
nav {background: #ccc;color: #666;font-size: 14px;height: 56px;text-transform: uppercase;position: relative;text-align: justify;margin: 0 0 60px;}
nav ul {list-style: none;margin: 0;padding: 0 20px;line-height: 56px;}
nav li {display: inline-block;}
nav ul:after {display: inline-block;width: 100%;content: '';}
nav .hover span {display:block;}
nav span {display:none; position:absolute; left:0; top:56px; width:100%; background:#999; color:#fff; padding:0 10px; box-sizing:border-box;}
|
отредактировал выше)
|
| Часовой пояс GMT +3, время: 08:29. |