Форум

Roman-lev · #1 (**permalink**) 31.01.2014, 01:37

Всем привет!

В общем у меня я думаю проблема для любого кто знает js не проблема.

Есть скрипт который показывает и скрывает див при наведении

<script>
$(function(){                      
   $('#fir').mouseover(function(){ 
     $('div.sec').slideToggle('slow');
	 $('div.sec').mouseout(function(){
      $('div.sec').slideToggle('slow');
   });
});
});
</script>

Проблема в том что если наводить быстро несколько раз это все атк и будет сворачиваться и разворачиваться много раз. Научите как правильно реализовать такое?

рони · #2 (**permalink**) 31.01.2014, 02:16

Roman-lev,
http://api.jquery.com/stop/

рони · #3 (**permalink**) 31.01.2014, 02:25

Roman-lev,

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        .sec {
            display: none;
            height: 100px;
            background-color: #9932CC;
        }
        p {
            background-color: #00FF7F;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script>
        $(function () {
            $('#fir').hover(function () {
                $('div.sec').stop().slideToggle('slow');

            });
        });
    </script>
</head>

<body>
    <p id="fir">1234567</p>
    <div class="sec">1234567</div>
</body>

</html>

Roman-lev · #4 (**permalink**) 31.01.2014, 03:16

рони, Спасибо, а как сделать что бы если курсор находится на div.sec он же не сворачивался?

рони · #5 (**permalink**) 31.01.2014, 03:33

Сообщение от Roman-lev

как сделать что бы если курсор находится на div.sec он же не сворачивался?

медитировать тут hover и элементы form

Roman-lev · #6 (**permalink**) 31.01.2014, 13:42

рони,
странно, но не получается.. скопипастил код, подставил туда свои дивы и все равно он обратно уезжает когда мышку навожу(

рони · #7 (**permalink**) 31.01.2014, 14:46

Roman-lev,
где код?

Roman-lev · #8 (**permalink**) 31.01.2014, 16:48

рони, вот)

<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function () {
    var d = $("#catalog"),
        f = $("div.sec-container");
    d.mouseenter(function (event) {
        f.stop(true, true).slideDown("slow")
    }).mouseleave(function (event) {
        if ($(event.target).parents("div.sec-container").size()) return;
        f.stop(true, true).slideUp(300)
    })
});
  </script>
</head>

<body>
<style>
.sec-container {
	position:absolute;
	width:100%;
	height:47px;
	background-color:#000;	
	margin-top:9px;
	display:none;
}
.catalog-bar-container {
	position:relative;
	width:1280px;
	margin:0 auto;
}
.catalog-bar a {
	font-size:12px;
	color:#FFF;
}
.catalog-bar {
	position:absolute;
	right:0;
	margin-top:13px;
}

</style>
            <div class="sitebar">
            	<ul id="bar">
                    <li id="catalog"><a href="#">Каталог</a>
                    </li> 
                </ul>    
            </div>
        <div class="sec-container">
        	<div class="catalog-bar-container">
            	<div class="catalog-bar">
        		<a href="#">1</a>&nbsp;&nbsp;&nbsp;
                <span style="color:#ffde00;font-size:12px;">•</span>&nbsp;&nbsp;
        		<a href="#">2</a>&nbsp;&nbsp;&nbsp;
                <span style="color:#ffde00;font-size:12px;">•</span>&nbsp;&nbsp;
        		<a href="#">3</a>&nbsp;&nbsp;&nbsp;
                <span style="color:#ffde00;font-size:12px;">•</span>&nbsp;&nbsp;
        		<a href="#">4</a>&nbsp;&nbsp;&nbsp;
                <span style="color:#ffde00;font-size:12px;">•</span>&nbsp;&nbsp;
        		<a href="#">5</a>&nbsp;&nbsp;&nbsp;
                <span style="color:#ffde00;font-size:12px;">•</span>&nbsp;&nbsp;
        		<a href="#">6</a>&nbsp;&nbsp;&nbsp;
                <span style="color:#ffde00;font-size:12px;">•</span>&nbsp;&nbsp;
        		<a href="#">7</a>
                </div>
        	</div>
        </div>
        
	</div>
</body>
</html>

Roman-lev · #9 (**permalink**) 01.02.2014, 12:51

рони, не будете мне больше помогать?

рони · #10 (**permalink**) 01.02.2014, 12:54

Roman-lev,

экий вы торопыга ... ~~ждите отстоя пива~~ после выходных

Форум

Справочник

Discord чат

Курсы javascript