单击时 jQuery 动画的问题 - 需要两次 + 错误的效果
Posted
技术标签:
【中文标题】单击时 jQuery 动画的问题 - 需要两次 + 错误的效果【英文标题】：Problems with jQuery Animating At Click - Twice needed + Wrong effect 【发布时间】：2015-07-11 00:27:09 【问题描述】：所以我试图制作一个导航栏，当您单击按钮/跨度时，会出现一个从顶部到导航栏下方的 div。 但是，当我单击“Homer”时，首先什么也没有发生，但第二次单击时，它会出现另一种效果，我没有在任何地方使用过。 [我不知道效果的名称，但 div 从它自己的左上角出现。]
这就是我想要的：
当我点击导航栏中的“Homer”时，一个 div 会从身体外移到身体上。 div 必须移动到导航栏下方的 0px，因此导航栏底部和 div(hidden-homer) 顶部之间没有空间。当我再次点击 Homer 时，div(hidden-homer) 必须再次离开屏幕，所以移动 up。
在 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);
【问题讨论】：
您使用的是什么版本的 jQuery？.toggle() 的双函数形式在 1.9 中被移除。
@Barmar 未压缩：code.jquery.com/jquery-1.11.2.js
那你就不能这样使用.toggle了。见***.com/questions/2459153/…
@Barmar 好的，谢谢。
假设您使用具有.toggle 的旧版本的jQuery，您所写的内容等待您首先单击nav 元素。当您这样做时，它会在 #hidden-homer 上添加一个单击处理程序，以执行交替动画。
【参考方案1】：
使用变量来跟踪每次单击导航栏中的元素时 DIV 必须移动的方向。
var up = true;
$("#nav span:nth-child(1)").click(function()
$("#hidden-homer").animate(
top: up ? "-70px" : "70px"
, 100);
up = !up;
);
【讨论】：
您好，谢谢！我不必再单击两次...，但它不起作用。我收到关于“向下”的错误，我不明白会发生什么（顶部：向上？“-70px”：“70px”），快速解释会有所帮助。 对不起，我把变量名从down改成了up，但是漏掉了一些地方。
Awww .... 非常感谢，但仍然... div 从它必须开始的地方开始（屏幕外）。但是当我点击'Homer'时，它首先向下移动一些像素[我现在称之为[1]]，然后我再次点击，它向下移动更多[2]，然后我再次点击它回到[1]，但是它不会退出屏幕...
我只是在复制您在原始代码中的动画。第一次单击将其向上移动 70 像素，第二次单击将其向下移动 70 像素。您可以将它们更改为您真正想要的任何内容。
嗨，再次。首先我很抱歉我这么晚才回来。但是我想了很久之后决定问你为什么这个解决方案有效。我是编程初学者，我会逐行描述我理解和不理解的内容。以上是关于单击时 jQuery 动画的问题 - 需要两次 + 错误的效果的主要内容，如果未能解决你的问题，请参考以下文章