我试图制作淡入/淡出动画。我希望它等待几秒钟,然后基本上在两个div之间切换。它有效,但有点跳到它的容器外面。看看http://programmingbounty.azurewebsites.net/
的样子这是代码的相关部分:
<div id = "TopBox" style="height: 350px; position: relative;">
<div id = "ForReaders" runat="server" style="opacity: 1" >
<div id = "Welcome" >
Welcome to Programming Bounty, where all your project resources can be easily found and implemented without registration!
<br />
<br />
<ul>
<li>Get high quality code and information from our members</li>
<li>No signup nessesary unless your making a post</li>
<li>Everything is absolutely free!</li>
</ul>
<br />
<a href = "Browse.aspx"> Check it out!</a>
</div>
<div id = "Catagories" align="center">
<h3>What are you searching for?</h3>
<div id = "dropdown">
<asp:DropDownList ID="DropDownList1" runat="server" Width="500px">
<asp:ListItem>Select Language</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
<asp:ListItem>C#</asp:ListItem>
<asp:ListItem>C++</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Objective-C</asp:ListItem>
<asp:ListItem>Perl</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
<asp:ListItem>Python</asp:ListItem>
<asp:ListItem>Ruby</asp:ListItem>
<asp:ListItem>Visual Basic</asp:ListItem>
<asp:ListItem>HTML/CSS</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<br />
<div id = "getfreecodenow">
<a href = "Library.aspx"> Get Free Code Now!</a>
</div>
</div>
</div>
<div id = "ForWriters" runat="server" style="display: none">
<div id = "WelcomeProgrammers" >
Welcome to Programming Bounty, where you get rewarded for contributions!
<br />
<br />
<ul>
<li>Write short code snippets, tutorials or other resources easily</li>
<li>People see and use your resources</li>
<li>You get paid in either cash or community currency!</li>
</ul>
<br />
<a href = "Library.aspx"> Check it out!</a>
</div>
<div id = "ProgrammingCatagories" align="center">
<h3>What are you searching for?</h3>
<div id = "Div3">
<asp:DropDownList ID="DropDownList3" runat="server" Width="500px">
<asp:ListItem>Select Language</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
<asp:ListItem>C#</asp:ListItem>
<asp:ListItem>C++</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Objective-C</asp:ListItem>
<asp:ListItem>Perl</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
<asp:ListItem>Python</asp:ListItem>
<asp:ListItem>Ruby</asp:ListItem>
<asp:ListItem>Visual Basic</asp:ListItem>
<asp:ListItem>HTML/CSS</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<br />
<div id = "GetPaidNow">
<a href = "Browse.aspx"> Get Paid Now!</a>
</div>
</div>
</div>
<br />
</div>
</div>
<div id = "TopCodeWrapper">
<div id = "TopCodeContainer">
<div id = "topcodeheader" dir="ltr">
<div id = "Popular">
<h3>Trending Now</h3>
<div id = "tabs" align="left"
style="margin: 0px; ">
<script src="script/jquery.js" type="text/javascript"></script>
<script type = "text/javascript">
function fade() {
var delay = 5000;
$(document.getElementById("<%= ForReaders.ClientID%>")).delay(delay).fadeOut("slow");
$(document.getElementById("<%= ForWriters.ClientID%>")).delay(delay).fadeIn("slow");
$(document.getElementById("<%= ForWriters.ClientID%>")).delay(delay).fadeOut("slow");
$(document.getElementById("<%= ForReaders.ClientID%>")).delay(delay).fadeIn("slow");
}
$(document).ready(function () {
var d = setInterval
(fade(), 1000);
});
</script>
答案 0 :(得分:0)
您完全滥用.delay()
和.setInterval()
。
这里绝对不需要使用.delay()。它用于对元素上的定时事件进行排队。例如$(element).fadeOut().delay(1000).fadeIn()
将使元素淡出,然后在1秒后淡入。因此在空闲元素上使用它根本没用。
我假设你想要这样的东西:http://jsfiddle.net/EvD66/1/
我正在使第一个元素淡出然后,使用动画结束时触发的回调,我使第二个元素淡入。