我修改了这个jsFiddle http://jsfiddle.net/tV9z9/23/，就像这个jsFiddle http://jsfiddle.net/warmwhisky/N68wX/13/
一样首次运行脚本时，我调用此级别1.然后单击其中一个缩略图并移动到级别2.我想通过单击返回运行状态（级别1）。也许关闭按钮或返回首次运行状态？
我尝试过使用带有js的onclick，但我无法使其正常工作。
我应该使用onlick还是可以保存jquery的状态并返回它？
这是代码
... JS
$(function() {
var content = $('#content'),
services_level2 = $('#services_level2'),
contentHeight = content.height(),
contentWidth = content.width(),
level2Width = services_level2.width(),
nav = $('#nav'),
count = 0;
// on load content height is shorter
content.width(0);
services_level2.width(613);
nav.find('a').on('click', function() {
var $this = $(this),
parent = $this.parent(),
targetElement = $this.attr('href');
//Does the slide animation once
if (count === 0) {
//Slide out and fade away the main copy
services_level2.animate({'width': services_level2 }, function() {
$(services_level2).animate({
'margin-left': '300%',
opacity: 0
}, 900);
});
content.animate({'width': contentWidth }, function() {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=210px',
'margin-left': '30%',
opacity: 1
}, 400);
});
count = 1;
} else {
//only add active class if parent does not have it and then animate it
if ( !parent.hasClass('active') ) {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=210px',
'margin-left': '30%',
opacity: 1
}, 500);
//Gets older clicked element
var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
}
}
return false;
});
});
HTML ...
<div id="container">
<div id="services_level2">
<h1>IT Services</h1>
<p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo. Omnis soluta periculis eu sit.
</p>
<h1>Repairs</h1>
<p>
Sit te habeo neglegentur, nam no dicit intellegat. Epicuri blandit sea eu, eum nibh adhuc mundi eu.
</p>
<h1>Other</h1>
<p>
Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea.
</p>
</div>
<div id="content">
<!--<div id="zero"><p>Zero</p></div>-->
<div id="one"><h1>Objective</h1><p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo.</p><h1>Delivery</h1><p>Sit te habeo neglegentur, nam no dicit intellegat. </p><h1>Performance</h1><p>Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea, est id suas delectus deseruisse.</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>
<div id="five"><p>Five</p></div>
<div id="six"><p>Six</p></div>
</div>
<ul id="nav">
<!--<li><a href="#zero"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/0.jpg"></a>
</li>-->
<li><a href="#one"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/1.jpg"></a>
</li>
<li><a href="#two"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/2.jpg"></a>
</li>
<li><a href="#three"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/3.jpg"></a>
</li>
<li><a href="#four"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/4.jpg"></a>
</li>
<li><a href="#five"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/5.jpg"></a>
</li>
<li><a href="#six"><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/6.jpg"></a>
</li>
</ul>
</div>
... CSS
#container {
height:390px;
overflow:hidden;
float:left;
background: #ccc no-repeat;
min-width:918px;
padding: 10px 10px 10px 10px;
}
#services_level2 {
position:fixed;
background:white;
padding:20px;
height: 345px;
}
#content {
width: 650px;
height: 385px;
position: relative;
overflow: hidden;
float: right;
}
#content > div {
display:block;
width:600px;
height:385px;
background:white;
position:absolute;
margin-left:100%;
/*left:-200px;*/
opacity: 0;
padding:10px 20px 0 40px;
}
#nav {
list-style: none;
display: table;
margin: 0px 0 0 0;
position: relative;
width: 260px;
float:right;
}
#nav li {
/* width: 100px; */
/* height: 100px; */
float: left;
margin-right:5px;
/*border: 1px solid black;*/
}
#nav a {
color:#fff;
text-decoration:none;
width:100%;
height:100%;
}
ul {
padding:0;
}
li.active {
opacity:0.4;
filter:alpha(opacity=40);
}
答案 0 :(得分：0)
你需要梳理你的代码并列出第一次点击时改变的所有值的列表，然后当点击#reset反转每个值时。 - = 200px将变为+ = 200px，依此类推。
答案 1 :(得分：0)
我找到了这个(JSFiddle)的解决方案，通过添加一个按钮并为其分配一个有3个动作的点击功能：
按钮代码：
$('#moveleft').click(function() {
count = 0;
// Slide Level 2 description back into view
$('#services_level2').animate({
'margin-left': '0%',
'opacity' : "1"
}, 800);
// Slide Level 3 out of view. The thumbnails follow Level 3.
$(level3_content).animate({
'width': '0px',
opacity: 1
}, 400);
// Delete the active class
var oldClickedElement = $('.active').removeClass('active').find('a').attr('href');
console.log(oldClickedElement);
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
});
这是JSFiddle http://jsfiddle.net/warmwhisky/N68wX/24/ 它是一个很好的滑块，有两个级别。不幸的是它还没有响应。