Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.11.2018, 00:38
Аспирант
Отправить личное сообщение для SolomonRei Посмотреть профиль Найти все сообщения от SolomonRei
 
Регистрация: 05.04.2018
Сообщений: 72

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

$('.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,а потом резко пропадает меню,а мне нужно плавно
Что я делаю не так?

Последний раз редактировалось SolomonRei, 21.11.2018 в 01:08.
Ответить с цитированием
  #2 (permalink)  
Старый 21.11.2018, 01:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,630

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>
Ответить с цитированием
  #3 (permalink)  
Старый 21.11.2018, 13:04
Аспирант
Отправить личное сообщение для SolomonRei Посмотреть профиль Найти все сообщения от SolomonRei
 
Регистрация: 05.04.2018
Сообщений: 72

Спасибо большое,а вот если открыли одно меню,и потом кликнули на другое,как сделать,чтобы это меню закрылось,а открылось то,на которое кликнули?
Ответить с цитированием
  #4 (permalink)  
Старый 21.11.2018, 13:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,630

SolomonRei,
https://javascript.ru/forum/project/...tml#post231407
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ajax. Как сделать загрузку изображений, отображение, удаление как на Авито wowtschuk AJAX и COMET 1 07.03.2017 01:34
Акардион меню из чекбоксов и списка, как сделать подсветку текущего элемента OliLoi jQuery 0 08.11.2016 08:15
Не понимаю JavaScript. Как сделать ожидание события загрузки данных? xintrea AJAX и COMET 7 01.06.2013 17:18
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14