当用户点击如下链接时，我正试图切换动画：
CSS
.men{
background: url("../img/men4.jpg") no-repeat scroll 16% 0 transparent;
height: 600px;
left: 0;
position: absolute;
width: 50%;
}
.women{
background: url("../img/women1.jpg") no-repeat scroll 84% 0 transparent;
height: 600px;
position: absolute;
right: 0;
width: 50%;
}
HTML
<div class="men">
</div>
<div class="women">
</div>
<a href="#" class="openmen">Men</a>
<a href="#" class="openwomen">Women</a>
JQUERY
$("a.openwomen").click(function(event){
event.preventDefault();
$('.women').animate({width:"80%"});
$('.men').animate({width:"20%"});
$('.men').animate({opacity: 0.5}, 500);
$('.women').animate({opacity: 1}, 500);
});
但我不太清楚如何去做，我希望它再次点击时回到原来的状态。
答案 0 :(得分：1)
您是否尝试过阅读JQuery API文档？
他们向您展示了如何使用toogle而不是自己动画每个组件的简单示例。 / <强> * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * *** /
为什么不尝试这样的事情？
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="#">Toggle 'em</a>
<div class="toggle_class">Hiya</div>
<div class="toggle_class">Such interesting text, eh?</div>
<script>
$("a").click(function () {
$(".toggle_class").toggle("slow");
});
</script>
</body>
</html>
答案 1 :(得分：1)
试试这个：
var toggle=1;
$(function() {
$("a.openwomen").click(function(event){
event.preventDefault();
if(toggle==1)
{
$('.women').animate({width:"80%"});
$('.men').animate({width:"20%"});
$('.men').animate({opacity: 0.5}, 500);
$('.women').animate({opacity: 1}, 500);
}
else
{
$('.women').animate({width:"50%"});
$('.men').animate({width:"50%"});
$('.men').animate({opacity: 0}, 500); //change opacity here as you want
$('.women').animate({opacity: 0}, 500); //change opacity here as you want
}
toogle=(toggle==1) ? 2 : 1;
});
});