Javascript 我的jquery动画是跳跃的

我正在尝试制作淡入/淡出动画。我想让它等几秒钟，然后基本上在两个div之间切换。它可以工作，但它有点在容器外跳跃。这是它的样子

下面是代码的相关部分：

                    <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>

欢迎来到Programming Bounty，在这里，您的所有项目资源都可以轻松找到并实现，无需注册！





从我们的会员处获取高质量的代码和信息
除非你发帖子，否则不要注册
一切都是绝对免费的



你在找什么？
欢迎来到编程赏金，在这里您可以获得贡献奖励！





轻松编写简短的代码片段、教程或其他资源
人们看到并使用你的资源
您可以获得现金或社区货币支付



你在找什么？


当下趋势
函数fade（）{
var延迟=5000；
$（document.getElementById（“”）.delay（delay）.fadeOut（“slow”）；
$（document.getElementById（“”）.delay（delay）.fadeIn（slow）；
$（document.getElementById（“”）.delay（delay）.fadeOut（“slow”）；
$（document.getElementById（“”）.delay（delay）.fadeIn（slow）；
}
$（文档）.ready（函数（）{
var d=设定间隔
（fade（），1000）；
});

您完全误用了

.delay（）

和

.setInterval（）

。 这里绝对不需要使用.delay（）。它用于对元素上的定时事件排队。例如，

$（element）.fadeOut（）.delay（1000）.fadeIn（）将使元素淡出，然后在1秒后淡入。因此，在空闲元素上使用它毫无用处

我想你想要这样的东西：

我正在使第一个元素淡出，然后，使用动画结束后触发的回调，使第二个元素淡入。
原因可能是对所有动画的异步调用。因为动画是异步工作的。因此每个淡出将并行调用