单击导航内容时,Jquery切换不会淡出 [英] Jquery toggle don't fade out on click of navigation content
本文介绍了单击导航内容时,Jquery切换不会淡出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
JS文件
JS File
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
代码
Code
<li><a href="#home">HOME</a></li>
<li><a href="#service">SERVICES</a></li>
<li><a href="Portfoilo.aspx">PORTFOLIO</a></li>
<li><a href="#">WHY US</a></li>
<li><a href="#">CONTACT</a></li>
</div>
<a href="javascript:void(0)" class="icon">
<div class="hamburger" style="margin-left:6px;">
<div> <img style="width: 321px; height: 50px; margin-left: 511px;" src="Images/ar logo.jpg" /> </div>
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
CSS文件
CSS file
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
body {
background-color: white;
color: black;
}
h1 { color: white; }
.top-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.mid-animate { opacity: 0; }
.bottom-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
/* Chrome, Safari, Opera */
transform: rotate(-225deg);
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #F9A530;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #F9A530;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #F9A530;
}
.menui {
background: #FFFFFF;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 18px;
position: absolute;
}
.icon {
z-index: 999;
position: fixed;
/* background: rgba(0, 0, 0, 0.21);*/
display: block;
padding: 9px;
height: 32px;
width: 32px;
margin: 0px;
top: 0;
left: 0;
}
.mobilenav {
top: 47px !important;
font-family: inherit;
top: 0;
left: 0;
z-index: 999;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.9;
}
.mobilenav li {
list-style-type: none;
text-align: center;
padding: 10px;
}
.mobilenav li a {
font-size: 250%;
color: #fff;
text-decoration: none;
font-weight: 300;
width: 100%;
}
.mobilenav li:first-child { margin-top: 60px; }
我尝试过:
导航栏中的点击功能淡入淡出不正常
What I have tried:
Fade in and fade out not working properly on click function in navigation bar
推荐答案
( document )。ready( function (){
(document).ready(function () {
( 。icon)。点击( function (){
( .mobilenav )。fadeToggle( 500 );
(".mobilenav").fadeToggle(500);
这篇关于单击导航内容时,Jquery切换不会淡出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文