jQuery 动画点击时出现问题 - 需要两次 + 错误效果
Problems with jQuery Animating At Click - Twice needed + Wrong effect
所以我试图制作一个导航栏,当您单击按钮/跨度时,会出现一个 div,从顶部到导航栏正下方。
但是,当我点击 'Homer' 时,首先没有任何反应,但我第二次点击时,它出现了另一种效果,我没有在任何地方使用过。 [我不知道效果的名称,但 div 出现在它自己的左上角。]
这就是我想要的:
当我点击导航栏中的'Homer'时,一个div从off body到on body。 div 必须移动到导航栏下方的 0px,因此导航栏底部和 div(hidden-homer) 顶部之间没有 space。当我再次点击 Homer 时,div(hidden-homer) 必须再次离开屏幕,因此向上移动 。
在 JSFiddle 中,它根本不起作用...
- Firefox 控制台中没有错误,1 个警告:“不推荐使用 getPreventDefault()。请改用 defaultPrevented。”
- JSHint (JSFiddle) 中没有错误
所以 2 个问题:
- 当我点击 'Homer' 时,没有任何反应。
- 当我第二次点击 'Homer' - 没有重新加载页面 - div 在错误的位置出现错误的效果(在导航栏下方,所以你看不到一部分)。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<span>Homer</span>
<span>Marge</span>
<span>Bart</span>
<span>Lisa</span>
<span>Maggie</span>
</div>
<div id="hidden-homer" class="hidden">
<h1>Homer</h1>
<p>Text</p>
</div>
<div id="hidden-marge" class="hidden">
<h1>Marge</h1>
<p>Text</p>
</div>
<div id="hidden-bart" class="hidden">
<h1>Bart</h1>
<p>Text</p>
</div>
<div id="hidden-lisa" class="hidden">
<h1>Lisa</h1>
<p>Text</p>
</div>
<div id="hidden-maggie" class="hidden">
<h1>Maggie</h1>
<p>Text</p>
</div>
<div id="intro">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png">
</div>
jQuery:
<script>
var main = function() {
$('#nav span:nth-child(1)').click(function() {
$('#hidden-homer').toggle(function() {
$(this).animate({top: '70px'}, 100);
}, function() {
$(this).animate({top: '-70px'}, 100);
});
});
};
$(document).ready(main);
</script>
CSS:
body {
background-color: #0040FF;
padding: 0px;
margin: 0px;
}
a {
outline: none;
}
#nav {
height: 70px;
line-height: 70px;
background-color: #FFBF00;
font-size: 0px;
text-decoration: none;
width: 100%;
text-align: center;
font-family: sans-serif;
margin-bottom: none;
z-index: 1;
}
#nav span {
display: inline-block;
font-size: 35px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-right: 3px solid #0040FF;
height: 70px;
cursor: pointer;
color: #0040FF;
text-decoration: none;
font-weight: bold;
}
#nav span:first-child {
border-left: 3px solid #0040FF;
}
#nav span:hover {
background-color: #0040FF;
color: #FFBF00;
}
.hidden {
width: 100%;
height: 200px;
padding-left: 30px;
background-color: #1C1C1C;
color: red;
font-size: 10px;
top: -250px;
position: absolute;
z-index: -1;
border: 2px solid black;
}
img {
height: 200px;
width: 400px;
transform: rotate(10deg);
}
使用变量来跟踪每次单击导航栏中的元素时 DIV 必须移动的方向。
var up = true;
$("#nav span:nth-child(1)").click(function() {
$("#hidden-homer").animate({
top: up ? "-70px" : "70px"
}, 100);
up = !up;
});
所以我试图制作一个导航栏,当您单击按钮/跨度时,会出现一个 div,从顶部到导航栏正下方。 但是,当我点击 'Homer' 时,首先没有任何反应,但我第二次点击时,它出现了另一种效果,我没有在任何地方使用过。 [我不知道效果的名称,但 div 出现在它自己的左上角。]
这就是我想要的:
当我点击导航栏中的'Homer'时,一个div从off body到on body。 div 必须移动到导航栏下方的 0px,因此导航栏底部和 div(hidden-homer) 顶部之间没有 space。当我再次点击 Homer 时,div(hidden-homer) 必须再次离开屏幕,因此向上移动 。
在 JSFiddle 中,它根本不起作用...
- Firefox 控制台中没有错误,1 个警告:“不推荐使用 getPreventDefault()。请改用 defaultPrevented。”
- JSHint (JSFiddle) 中没有错误
所以 2 个问题:
- 当我点击 'Homer' 时,没有任何反应。
- 当我第二次点击 'Homer' - 没有重新加载页面 - div 在错误的位置出现错误的效果(在导航栏下方,所以你看不到一部分)。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<span>Homer</span>
<span>Marge</span>
<span>Bart</span>
<span>Lisa</span>
<span>Maggie</span>
</div>
<div id="hidden-homer" class="hidden">
<h1>Homer</h1>
<p>Text</p>
</div>
<div id="hidden-marge" class="hidden">
<h1>Marge</h1>
<p>Text</p>
</div>
<div id="hidden-bart" class="hidden">
<h1>Bart</h1>
<p>Text</p>
</div>
<div id="hidden-lisa" class="hidden">
<h1>Lisa</h1>
<p>Text</p>
</div>
<div id="hidden-maggie" class="hidden">
<h1>Maggie</h1>
<p>Text</p>
</div>
<div id="intro">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png">
</div>
jQuery:
<script>
var main = function() {
$('#nav span:nth-child(1)').click(function() {
$('#hidden-homer').toggle(function() {
$(this).animate({top: '70px'}, 100);
}, function() {
$(this).animate({top: '-70px'}, 100);
});
});
};
$(document).ready(main);
</script>
CSS:
body {
background-color: #0040FF;
padding: 0px;
margin: 0px;
}
a {
outline: none;
}
#nav {
height: 70px;
line-height: 70px;
background-color: #FFBF00;
font-size: 0px;
text-decoration: none;
width: 100%;
text-align: center;
font-family: sans-serif;
margin-bottom: none;
z-index: 1;
}
#nav span {
display: inline-block;
font-size: 35px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-right: 3px solid #0040FF;
height: 70px;
cursor: pointer;
color: #0040FF;
text-decoration: none;
font-weight: bold;
}
#nav span:first-child {
border-left: 3px solid #0040FF;
}
#nav span:hover {
background-color: #0040FF;
color: #FFBF00;
}
.hidden {
width: 100%;
height: 200px;
padding-left: 30px;
background-color: #1C1C1C;
color: red;
font-size: 10px;
top: -250px;
position: absolute;
z-index: -1;
border: 2px solid black;
}
img {
height: 200px;
width: 400px;
transform: rotate(10deg);
}
使用变量来跟踪每次单击导航栏中的元素时 DIV 必须移动的方向。
var up = true;
$("#nav span:nth-child(1)").click(function() {
$("#hidden-homer").animate({
top: up ? "-70px" : "70px"
}, 100);
up = !up;
});