Question

这是一个小样本。两个div应该在点击后浮动到中心，而另一个应该消失。单击“x”后，它应该回到现状。这适用于两者，除了对于右div，动画有一个奇怪的行为。

这是我第一次尝试用animate()做某事，所以也许我会监督一些显而易见的事情。正如您在单击右侧div上的“x”后所看到的，它首先移动到页面底部，然后移动到正确的位置（这非常难看）。我在animate()所做的全部工作都是将更改后的值重置为默认值，就像在第一个div上一样。就像在第一个div中我只改变边距一样，它确实与高度的变化有关。如何抑制此行为并让它直接移动到该位置？

浏览器：Firefox 16.0.2 fiddle-link

的test.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>

welcome.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();
    });

});

welcome.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;  
}

Answer 1

看看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);
});

jquery.animate（），奇怪的行为

1 个答案: