1

Сделал менюшку, выдвигающуюся при нажатии на кнопку с помощью такого кода:

$(document).ready(function() {
  $("div#div1").click(function() {
    $("div#div2").toggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="display : block">Первый DIV</div>
<div id="div2" style="display : none">Второй DIV</div>

Как сделать, чтобы она выдвигалась плавно?

2
  • 1
    Интересно, вы так и будете решения предыдущего вопроса Выползающий блок при нажатии на кнопку переносить в новый вопрос вместо того, чтобы разобраться в решении, почитать документацию хотя бы? 15 мая 2015 в 16:46
  • прошу прощение за мое тугодумство. я здесь недавно и еще не вполне разобрался со здешними правилами. А документацию рою - правда ничего в ней не понимаю ) Сегодня весь день потратил на решение этого вопрова. Хотя для специалиста, как видно, работы на минуту ) 15 мая 2015 в 17:15

3 ответа 3

3

$(document).ready(function() {
  $("div#div1").click(function() {
    $("div#div2").slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="display : block">Первый DIV</div>
<div id="div2" style="display : none">Второй DIV</div>

1
  • .slideToggle(); должен помочь!
    – Mike
    15 мая 2015 в 13:41
1

Всё просто:

$(document).ready(function() {
  $("div#div1").click(function() {
    $("div#div2").slideToggle('slow');
  });
});

По-моему еще можно для slideToggle('400') - задать в миллисекундах

0

Попробуй через .mouseenter() и .mouseleave здесь

$('.cont').mouseenter(function() {
    $('.cont2').slideToggle(500);
});
$('.cont').mouseleave(function() {
    $('.cont2').slideToggle(500);
});
.cont {
    width: 100px;
    height: 30px;
    background: #222;
}
.cont2 {
display:none;
height:60px;
position:relative;
}
.cs{
     position:absolute;
    bottom:0;
}
.block {
 background: #222;
 position: relative;
 width: 100px; height: 50px;
}
.block::after {
 content: ''; 
 position: absolute;
 right: 40px; top: -20px;
 border: 10px solid transparent;
 border-bottom: 10px solid #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div href="#" class="cont">
  </div>
  <div class="cont2"><div class="cs"><div class="block"></div></div>
  </div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.