无法理解为什么这不起作用的逻辑，但基本上我正在做一项学校作业，创建 jquery 来创建一个有很多层的网站，我做到了。一切都已完成，除非我的导航仅在第一次通过单击按钮调用它时进行动画处理，而不是第二次进行动画处理。其他一切似乎都工作正常，但这个。非常感谢您的帮助。 live example
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 6 | jQuery Usability </title>
<link rel="stylesheet" href="CSS/A6.css">
<!-- This matches the CSS width to the device width, and prevents forced overview without disabling zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Helpful for older Blackberries -->
<meta name="HandheldFriendly" content="True">
<!-- Helpful for older IE mobile -->
<meta name="MobileOptimized" content="320">
<!-- Apple iOS-specific -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- enforce CSS3 media queries in IE 8 and older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Note: this won't work when testing locally; you'll need to upload your files to a server to test it in IE -->
<!-- HTML5shiv, for IE 6, 7 and 8 -->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
//$('ul:first').hide();
//$('ul li').hide();
$('nav>li').hide();
$('ul').hide();
$('h2').hide();
/*('h1>').click(function (event) {
$('nav>ul li:hidden').each(function(i) {
$('nav>li').show();
$('h1').hide();
$(this).delay(i*600).fadeIn(200);
});
$('nav>ul li:visible').each(function(i) {
$('h1').hide();
});*/
$('a.btnDown').click(function () {
$('body').css('background', 'tomato');
$('nav>ul li:hidden').each(function(i) {
//$('nav>h1').fadeOut(300);
//$('nav>ul').fadeIn(200);
$('h1').hide();
$('nav>ul').delay(i*600).fadeIn(200);
return false;
});
}); //closes a.btnDown
$('nav>li').click(function () {
$('nav>ul li:visible').each(function(i) {
$('h1').show();
$('nav>li').hide();
$('ul li').hide();
//clearTimeout(fadeTimeout);
$('nav>li').delay(i*600).fadeOut(200);
}); //closes visible i
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
/*$('a.bck').click(function() {
var $aAside = $('aside');
$aAside.animate({
left: 300})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10})
return false;
}); //closes bck click*/
$('a.bck').click(function() {
var $aAside = $('aside');
$('aside>ul>li:visible').hide();
$aAside.animate({
left: 300
})
var $smL = $('h2');
$smL.animate({
left: -300})
//move nav back in way
var $nav = $('.navBar');
$nav.animate({
left: 10
})
return false;
}); //closes bck click
var $as = $('a.contentDown').click(function () {
$('h2').show();
var $smL = $('h2');
$smL.animate({
left: 300})
//move nav out of way
var $nav = $('.navBar');
$nav.animate({
right: 300})
//move menu out of way
var $menu = $('.menu');
$menu.animate({
bottom: 300})
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(500);
return false;
}); //closes contentDown
}); //closes .ready()
</script>
</head>
<body>
<h1 class="menu"><a class="btnDown" href="#"> Main Menu </a></h1>
<nav class="navBar" >
<li><a class="menuShow" href="#"> Assignment 6 </a></li>
<ul>
<li><a class="contentDown" href="#" > Part One </a></li>
<li><a class="contentDown" href="#"> Part Two </a></li>
<li><a class="contentDown" href="#"> Part Three </a></li>
<li><a class="contentDown" href="#"> Student Notes 1 </a></li>
<li><a class="contentDown" href="#"> Student Notes 2 </a></li>
<li><a class="contentDown" href="#"> Student Notes 3</a></li>
</ul>
</nav>
<h2 id="round"><a class="bck" href="#"> Back </a></h2>
<aside>
<ul>
<li> Interactive media has been apart of my life since as long as I can remember. I have always been fascinated with any form of media including television, video games, handheld games, or websites. However before attending school to study interactive media, I never noticed the little things that can really affect the experience for a user. One item in particular being diegetic elements. Diegetic elements are objects within a media that only the user knows about. For instance, in a video game a diegetic element would be the items you see on the side of the screen that inform you how much health or ammo you have remaining. These are necessary components for they are needed to tell the player perhaps where to go for their next objective, or if any enemies are around you. We have also been exposed to 'non-diegetic' elements that act just the opposite of diegetic ones. Non-diegetic elements are items inside interactivity that are supposed to be there. This is a way of implementing a diegetic element into the space of the world you create. For example, a non-diegetic element would be the ammo bar being placed on the gun, instead of a static bar on the side of the screen. Some patterns being used in interactive media today include the majority of diegetic elements that would at one time be diegetic, but attempting to translate it into a non-diegetic element. </li>
</ul>
<ul>
<li> One ways people have done this is throwing elements in the world that would be believable to the player that they should be there. Instead of throwing a sidebar with your gun ammo and grenade count, it would make sense if a game is placed in modern-time that we would have technology available to put that information on the gun. One of the biggest examples of great uses of non-diegetic elements in the way the players health is damaged. Older games will have a health bar, but more modern games will mostly have a “shock” state where the screen might turn red, or your player begins to lose the ability to act normal when they are under fire. Does this mean we should stop using diegetic elements altogether? This is a question anyone in any form of interactive media should be asking themselves. The problem is that you can have too much non-diegetic presence that would confuse the user instead of help them which was originally intended. Resident Evil received a lot of harsh criticism for their lack of diegetic presence to help the player finish the game. It was hard for the user to be able to tell when the character was going to die based on their health system. If you received damage your character will hunch over, but it's unclear how much damage you're taking. The user will often die </li>
</ul>
<ul>
<li> without knowing whether or not you should have died, as opposed to a health bar that would show you. Contrary to too much non-diegetic presence, is too much diegetic elements. In titles such as World of Warcraft, or League of Legends, some are simply overwhelmed by the fact that half of the screen is objects that you are supposed to be aware of but until you learn the game they make as much sense as flying pigs. In conclusion, it is best to find that medium for any interactive media that has non-diegetic or diegetic elements. It is different for each occasion, for a first-person shooter the need for diegetic elements is acute, while in a complex game like World of Warcraft it is necessary. Websites are the same, and it would be logical and smart for developers to start thinking about how we can eliminate clutter, and turn it into a non-diegetic element for the user. </li>
</ul>
<ul>
<li> Content 4 </li>
</ul>
<ul>
<li> Content 5 </li>
</ul>
<ul>
<li> Content 6 </li>
</ul>
</aside>
<figure>
<!-- PUT TV IMAGE HERE -->
</figure>
</body>
</html>
CSS
html, body
{
/* Very basic CSS resets */
margin:0px;
padding:0px;
height:100%;
}
/* From HTML5 Boilerplate:
1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
2. Force vertical scrollbar in non-IE
3. Prevent iOS text size adjust on device orientation change, without disabling user zoom
*/
html
{
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* This will enforce block-level properties to HTML5 elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, time
{
display: block;
}
/* Make sure there aren't pesky outlines added to click events */
a:hover, a:focus, a:active
{
outline: 0;
}
/* MOBILE-FIRST CSS HERE */
body
{
background: beige;
}
/* DESKTOP */
nav
{
height: 154px;
position: relative;
padding-top: 40px;
}
h1 {
background: tomato;
display:block;
width:30%;
position:relative;
padding:7px;
text-align:center;
margin-left: auto;
margin-right: auto;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.75) inset;
opacity: 0.7;
}
h1>a
{
color: beige;
text-decoration: none;
}
h1>a:hover
{
color:beige;
}
a.contentDown
{
color: red;
text-decoration: none;
}
ul
{
text-align: center;
padding-top: 20px;
}
ul li
{
list-style-type: none;
padding: 15px;
background: beige;
padding: 20px;
margin: 20px;
width: 10%;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.75) inset;
opacity: 0.8;
}
ul li>a:hover
{
color:beige;
}
aside
{
padding-top: -20px;
}
aside>ul li
{
width: 50%;
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: -100px;
background:beige;
color: tomato;
}
h2#round
{
background: cadetblue;
display:block;
width:auto;
position:absolute;
padding:7px;
text-align:center;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.75) inset;
opacity: 0.9;
margin-left: -250px;
padding-top: 10px;
}
h2>a
{
text-decoration: none;
color: beige;
}
h2>a:hover
{
color: tomato;
}
/* ==================================
MEDIA QUERIES!
================================= */
最佳答案
在点击导航栏中的链接之前，导航栏有 HTML 代码:
<nav class="navBar">
当你点击一个链接时，它有代码:
<nav class="navBar" style="right: 300px;">
然后当你返回时，它有代码:
<nav class="navBar" style="right: 300px; left: 10px;">
这会产生一个问题，这意味着您的 JQuery 无法更改导航栏的位置。所以你要做的是将“left”设置为“auto”——这是 left 的默认值，允许你的导航栏再次移动。无论如何，这是我的解决方案的 JSFiddle:http://jsfiddle.net/LPDkg/ (更改在 javascript 窗口中的第 112 和 117 行)
关于jquery - 导航只动画一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22276569/