我的 jquery 动画跳动

Question

我试图制作淡入/淡出动画。我希望它等待几秒钟，然后基本上在两个 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>

Answer 1

您完全滥用了.delay() 和.setInterval()。 这里绝对没有必要使用 .delay() 。它用于对元素上的定时事件进行排队。例如$(element).fadeOut().delay(1000).fadeIn() 将使元素淡出，然后在 1 秒后淡入。所以在空闲元素上使用它根本没有用。

我假设你想要这样的东西：http://jsfiddle.net/EvD66/1/

我让第一个元素淡出，然后使用动画结束后触发的回调，让第二个元素淡入。