Span元素不从jQuery运行动画
Span element does not run the animation from jQuery
我试图通过单击具有runmenu
类但不起作用的span
,使jQuery动画从右侧显示一个菜单,我为button
创建了相同的类,它运行良好,这里的问题是什么,为什么它只适用于button
?!
$(document).ready(function() {
$(".runmenu").click(function() {
$(".menu").animate({
"right": 0
}, 1000);
});
});
/* Global*/
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template retrospect</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/StyleSheet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li><a href="#" class="runmenu">learn more </a>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>
</body>
</html>
这一切都与z-index
属性有关,javascript中没有任何错误。您的span.runmenu
无法单击,因为navbar2
块位于span
上方。更改css并解决问题。
给出
.runmenu {
z-index: 999;
cursor: pointer;
}
.navbar .navbar_two {
z-index: 0;
}
查看小提琴
预览
$(document).ready(function() {
$('span.runmenu').click(function() {
console.log("ok");
$(".menu").animate({
"right": 0
}, 1000);
});
});
/* Global*/
.runmenu {
z-index: 999;
cursor: pointer;
}
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
z-index: 0;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li><a href="#" class="runmenu">learn more </a>
</li>
</ul>
</div>
几个月前我也这样做了,最好的方法是在div中插入span并鼓励div。
$(".animamenu").click(function () {
$(".animamenu").animate({
"right": 0
}, 1000);
});
html:
<div>
<i class="fa fa-bars fa-lg"></i>
<div class="animamenu">
<span class="runmenu">menu</span>
</div>
</div>
相关文章:
- 动画、计时和运行循环等问题
- HTML5(Bootstrap)通过函数调用运行动画
- 为什么我的脚本正在运行动画,但没有显示它
- 画布动画似乎不会以60帧/秒的速度运行
- 仅在尚未运行jQuery UI的情况下运行动画
- Jquery toggleClass toggle的类,但不会多次运行动画
- 如何在另一个动画正在进行时延迟运行动画
- 运行动画,然后删除元素
- 如何通过Javascript运行动画
- Span元素不从jQuery运行动画
- 点击浏览器返回按钮运行动画
- 如何在每次输入变化时运行动画
- 简单的预加载器,加载所有的资源,并在显示网站和运行动画之前缓存它们
- 用Javascript运行动画后删除html标签
- 在jquery中运行动画后激活add类
- 同时运行动画不工作
- jQuery 运行动画,在文档加载时阻止默认值
- Skrollr 运行动画一次,然后停止
- 当这个动画准备好时再次运行动画
- 更好的方式来运行动画的有限循环