Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   пауза перед .hide Jquery (https://javascript.ru/forum/jquery/16320-pauza-pered-hide-jquery.html)

ufaclub 03.04.2011 22:00
пауза перед .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

kostr 03.04.2011 22:23
Можно вместо
jQuery("#ed1pod").hide();

поставить
jQuery("#ed1pod").delay(2000).fadeOut();


delay(2000) - это задержка на 2 секунды.

ufaclub 03.04.2011 22:28
спасибо - то что нужно:D

ufaclub 03.04.2011 22:31
а как сделать еще что пока курсор над ed1pod div#ed1pod не закрывался?

walik 03.04.2011 23:49 
<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 секунды он будет скрыт.

ufaclub 04.04.2011 00:10
спасибо):dance:

alexscus 16.03.2017 09:39
Подскажите, а к списку из неск. блоков можно применить?
чтобы пауза была, когда курсор убираем.
$('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>

рони 16.03.2017 10:43
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>

alexscus 16.03.2017 11:54
Спасибо, но немного не то, тут задержка нужна к меню при переходе на другой пункт.

моя вина, надо было мне сразу пример показать - > песочница


$('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;}

alexscus 16.03.2017 13:11
отредактировал выше)

рони 16.03.2017 16:00
alexscus,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  nav{
    background:#ccc;
    color:#666;
    font-size:14px;
    height:56px;
    text-transform:uppercase;
    position:relative;
  }

  nav ul{
    text-align:center;
    padding:0;
    display:flex;
    list-style:none;
    margin:0;
    line-height:56px;
  }

  nav li{
    flex:1;
  }

  nav li: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;
    text-align:left;
  }
  </style>

</head>

<body>
<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>

</body>
</html>

Dilettante_Pro 16.03.2017 17:49
рони, а тормоза?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  nav{
    background:#ccc;
    color:#666;
    font-size:14px;
    height:56px;
    text-transform:uppercase;
    position:relative;
  }

  nav ul{
    text-align:center;
    padding:0;
    display:flex;
    list-style:none;
    margin:0;
    line-height:56px;
  }

  nav li{
    flex:1;
  }

  nav li:hover span{
    opacity: 1;
  }

  nav span{
    opacity: 0;
    position:absolute;
    left:0;
    top:56px;
    width:100%;
    background:#999;
    color:#fff;
    padding:0 10px;
    box-sizing:border-box;
    text-align:left;
    transition: 2s;
  }
  </style>

</head>

<body>
<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>

</body>
</html>

рони 16.03.2017 18:05
Цитата:
Сообщение от Dilettante_Pro
рони, а тормоза?
замечательный вариант!
главное было убрать промежуток между li, из-за которого были провалы.

alexscus 20.03.2017 08:07
спасибо!


Часовой пояс GMT +3, время: 02:43.