Как сделать плавную анимацию
Добрый вечер.Сделал выпадающие меню.Только вот не получается сделать анимацию при появлении и при пропадании
Но у меня не хочет производиться плавная анимация
$('.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,
<!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>
|
Спасибо большое,а вот если открыли одно меню,и потом кликнули на другое,как сделать,чтобы это меню закрылось,а открылось то,на которое кликнули?
|
|
| Часовой пояс GMT +3, время: 00:42. |