$(document).ready(function() {
if ( $("a#k").data('clicked'))
{
$("#contentfour").hide();
$("#contact").hide();
function() {
$("#contentthree").show("slide", { direction: "left" }, 1000);
},
function() {
$("#contentthree").hide("slide", { direction: "left" }, 1000);
}
}
else if ( $("a#o").data('clicked'))
{
$("#contact").hide();
$("#contentthree").hide();
function() {
$("#contentfour")show("slide", { direction: "right" }, 1000);
},
function() {
$("#contentfour").hide("slide", { direction: "right" }, 1000);
}
}
else( $("a#toggle").data('clicked'))
{
$("#contentfour").hide();
$("#contentthree").hide();
$(function ()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});
});
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="js/jquery.responsive.slider.js" type="text/javascript"></script>
<script src="klogic.js" type="text/javascript"></script>
</head>
<body>
<div id="full-size">
<div id="one">
<div id="kt"><!--one -->
<h3><a href="#" id="toggle">Contact</a></h3>
<h3><a href="#"id="k">Portfolio</a></h3>
<h3><a href="#"id="o">Blog</a></h3>
<img src="logo.png" style="width:110px;height:110px;"/>
</div><!-- taking out one -->
</div>
<div id="two"><div id="contact" >kflskf;sdkfdskfldsfks</div></div><!--red-->
<div id="three"><div id="contentthree">gdfgdsfgsd</div></div><!--green-->
<div id="four"><div id="contentfour" >gsdfgdsgdsfg</div></div><!--blue-->
</div>
</body>
<html>
html, body {margin:0;padding:0;height:100%;}
#full-size {
background-image:url(bg.png);
background-repeat:no-repeat;
height:100%;
width:100%;
top:0;
left:0;
}
#one
{
width:50%;
height:50%;
background-color:orange;
float:left;
opacity:0.80;
filter:alpha(opacity=80);
}
#two
{
width:50%;
height:50%;
background-color:red;
float:left;
opacity:0.60;
filter:alpha(opacity=60);
}
#three
{
width:50%;
height:50%;
background-color:green;
float:left;
opacity:0.60;
filter:alpha(opacity=60);
}
#four
{
width:50%;
height:50%;
background-color:blue;
float:left;
opacity:0.60;
filter:alpha(opacity=60);
}
#kt
{
width:200px;
height:175px;
background-color:grey;
float:left;
position:relative;
left:200px;
top:-10px;
}
#contact
{
/*width:623.5px;
height:285px;*/
width:100%;
height:100%;
background-color: grey;
float:left;
display:none;
}
#contentthree
{
/*width:623.5px;
height:290px;*/
width:100%;
height:100%;
background-color:grey;
float:right;
display: none;
}
#contentfour
{
/*width:623.5px;
height:290px;*/
width:100%;
height:100%;
display: none;
background-color:red;
float:right;
}
#k { width: 500px; height: 200px; background-color: green; border: 1px solid black; position: relative; font-size:175%;}
#o { width: 500px; height: 200px; background-color: blue; border: 1px solid black; position: relative; font-size:175%;}
#toggle { width: 500px; height: 200px; background-color: yellow; border: 1px solid black; position: relative;font-size:175%; }
我的主要问题是我的jquery / Javascript我试图为我的三个动画创建一个逻辑工作，我希望他们当时加载一个，所以当一个加载其他2隐藏。 感谢。
答案 0 :(得分：0)
您不需要将任何if或else if用于工作。
<强> DEMO
$(function() {
$("a#k").click(function(){
$("#contentfour").hide();
$("#contact").hide();
$("#contentthree").show("slide", { direction: "left" }, 1000);
$("#contentthree").hide("slide", { direction: "left" }, 1000);
});
$("a#o").click(function(){
$("#contact").hide();
$("#contentthree").hide();
$("#contentfour").show("slide", { direction: "right" }, 1000);
$("#contentfour").hide("slide", { direction: "right" }, 1000);
});
$("a#toggle").click(function(){
$("#contentfour").hide();
$("#contentthree").hide();
$("#contact").slideToggle();
});
});