1

这是一个小样本。两个divs 应该在单击后浮动到中心，而另一个应该消失。点击“x”后，应该会回到原状。这对两者都很好，除了 right div，动画有一个奇怪的行为。

这是我第一次尝试对 做某事animate()，所以也许我监督了一些显而易见的事情。正如您在单击右侧的“x”后看到的那样div，它首先移动到页面底部，然后移动到正确的位置（这很丑陋）。我所做的animate()就是将更改的值重置为默认值，就像在第一个div. 和第一个一样，div我只改变了边距，它肯定与高度的改变有关。我怎样才能抑制这种行为并让它直接移动到那个位置？

浏览器：Firefox 16.0.2 小提琴链接

测试.html

<!DOCTYPE html>
<html>
    <head>

        <title>Welcome to BetManager</title>
        <meta charset="UTF-8"/>
        <link href="css/mainContent.css"    type="text/css" rel="stylesheet" />
        <link href="css/headContent.css"    type="text/css" rel="stylesheet" />
        <link href="css/welcome.css"        type="text/css" rel="stylesheet" />

        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/welcome.js"></script>

    </head>
    <body>

        <div class="mainContainer">
            <div class="headContentContainer">

            </div>
            <div class="mainContentContainer">

                <div id="welcomeLogin" class="welcomeInnerContainer">
                    <div class="firstView" id="firstViewLogin">
                        default Image Login
                    </div>
                    <div class="afterView" id="afterViewLogin">
                        <div id="cancelLogin">
                            x
                        </div>
                    </div>
                </div>

                <div id="welcomeRegister" class="welcomeInnerContainer">
                    <div class="firstView" id="firstViewRegister">
                        default Image Register
                    </div>
                    <div class="afterView" id="afterViewRegister">
                        <div id="cancelRegister">
                            x
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </body>
</html>

欢迎.js

$(document).ready(function(){

    // login panel
    $("#firstViewLogin").click(function(){
        $("#welcomeRegister").hide();
        $("#welcomeLogin").animate({
            marginLeft:'35%'
        });
        $("#firstViewLogin").fadeOut(500);
        $("#afterViewLogin").delay(500).fadeIn(500);
    });

    $("#welcomeLogin").hover(function(){
            $("#welcomeLogin").addClass("welcomeInnerContainerHovered");
        },
        function(){
            $("#welcomeLogin").removeClass("welcomeInnerContainerHovered");
    });

    $("#cancelLogin").click(function(){
        $("#welcomeLogin").animate({
            marginLeft:'15%'
        });
        $("#afterViewLogin").fadeOut(500);
        $("#firstViewLogin").delay(500).fadeIn(500);
        $("#welcomeRegister").show();
    });

    // register panel
    $("#firstViewRegister").click(function(){
        $("#welcomeLogin").hide();
        $("#welcomeRegister").animate({
            marginRight:'35%',
            height:'80%',
            marginTop:'5%'
        });
        $("#firstViewRegister").fadeOut(500);
        $("#afterViewRegister").delay(500).fadeIn(500);
    });

    $("#welcomeRegister").hover(function(){
            $("#welcomeRegister").addClass("welcomeInnerContainerHovered");
        },
        function(){
            $("#welcomeRegister").removeClass("welcomeInnerContainerHovered");
    });

    $("#cancelRegister").click(function(){
        $("#welcomeRegister").animate({
            marginRight:'15%',
            height:'60%',
            marginTop:'10%'
        });
        $("#afterViewRegister").fadeOut(500);
        $("#firstViewRegister").delay(500).fadeIn(500);
        $("#welcomeLogin").show();
    });

});

欢迎.css

body{
    background: #EEEEEE;
    width: 1920px;
    height: 900px;
    min-height:900px;
    margin:auto;
    font-family: Calibri;
}

.mainContainer{
    width: 80%;
    height:96%;
    min-height:96%;
    margin: auto;
    margin-top:2%;
}

.mainContentContainer{
    background: #CCCCCC;
    width: 100%;
    height:90%;
    min-height:80%;
    margin:auto;
}

.welcomeInnerContainer{
    width: 30%;
    height: 60%;
    border-radius: 5px;
    background: white;
    margin-top: 10%;
    cursor: pointer;
}

.headContentContainer{
    background: #999999;
    width:100%;
    height: 10%;
}

.welcomeInnerContainerHovered{
    width: 30%;
    height: 60%;
    background: white;
    margin-top: 10%;
    cursor: pointer;
    box-shadow: 6px 6px 6px #777777;
}

#welcomeLogin{
    float:left;
    margin-left: 15%;
}

#welcomeRegister{
    float:right;
    margin-right: 15%;
}

.afterView{
    display: none;
    cursor: default;
}

#cancelLogin{
    margin-left: 2%;
    cursor: pointer;
}

#cancelRegister{
    margin-left: 2%;
    cursor: pointer;  
}
4

1 回答 1

4

看看http://jsfiddle.net/TFtMq – dbaseman

您可能首先想要更改这样的内容以使用回调函数（动画完成后调用的函数）。http://api.jquery.com/fadeIn/

$("#firstViewLogin").fadeOut(500);
$("#afterViewLogin").delay(500).fadeIn(500);

到

$('#firstViewLogin').fadeOut(500, function() {
    $("#afterViewLogin").fadeIn(500);
});
于 2012-11-23T19:27:45.993 回答