Форум

SolomonRei · #1 (**permalink**) 21.11.2018, 00:38

Добрый вечер.Сделал выпадающие меню.Только вот не получается сделать анимацию при появлении и при пропадании
Но у меня не хочет производиться плавная анимация

$('.href-drop').on('click', function() {
		var visibility = $('.two-block-li>.dropdown-child').css('visibility');
		if (visibility == 'hidden') {
			$('.two-block-li>.dropdown-child').fadeIn(2000, function() {
				$(this).css(cssMenuDropStyleHidden);
			});
		}else {
			$('.two-block-li>.dropdown-child').fadeOut(2000, function() {
				$(this).css(cssMenuDropStyleVisible);
			});
		}
	});

У меня просто в кончоли идет отсчет opcity до 0,а потом резко пропадает меню,а мне нужно плавно
Что я делаю не так?

рони · #2 (**permalink**) 21.11.2018, 01:11

SolomonRei,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

.dropdown-child{
    display: none;
    background-color: #3a2b20;
    min-width: 228px;
    min-height: 340px;
    margin: 12px 0 0 0;
    font-family: Roboto;
}

.dropdown-child>.border-div>a {
    color: #cdcccb;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #ffc000;
    margin: 0px 13px 0 13px;
    padding: 14px 0 10px 15px;

}
.border-div>a:hover {
    opacity: 1;
    color: red;
}
.current {
    padding: 14px 0 0 0;
}
.border-div {
    list-style-type: none;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {

    var timer;
    $('.logo-articles, .articles-title, .articles-text').on('click', function() {
      $('.two-block-li>.dropdown-child').fadeToggle(800)
    });

});
  </script>
</head>

<body>
<div class="two-block-li" id = "two-block-li">
                        <a href="#news" class = "href-drop">
                            <div class = "logo-articles"></div>
                            <p class = "articles-title">статьи / новости</p>
                            <p class = "articles-text">Популярные статьи и свежие новости</p>
                        </a>
                        <div class = "delemiter-line"></div>
                            <ul class = "dropdown-child">
                                <li class = "border-div current">
                                	<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
                                </li>
                                <li class = "border-div">
                                	<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
                                </li>
                                <li class = "border-div">
                                	<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
                                </li>
                                <li class = "border-div">
                               	 	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
                               	</li>
                                <li class = "border-div">
                                	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
                                </li>
                                <li class = "border-div">
                                	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
                                </li>
                                <li class = "border-div">
                                	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
                                </li>
                  		</ul>
                    </div>

</body>
</html>

SolomonRei · #3 (**permalink**) 21.11.2018, 13:04

Спасибо большое,а вот если открыли одно меню,и потом кликнули на другое,как сделать,чтобы это меню закрылось,а открылось то,на которое кликнули?

рони · #4 (**permalink**) 21.11.2018, 13:31

SolomonRei,
https://javascript.ru/forum/project/...tml#post231407

Форум

Справочник

Discord чат

Курсы javascript