CODEWITHSUNDEEP
jqueryhtmlcssanimation
Valentino Ru
Valentino Ru

Reputation: 5052

jquery.animate(), strange behaviour

Here is a little sample. The two divs are supposed to float to center after clicking it, while the other one should disappear. After clicking the "x", it should go back to status quo. This works fine for both, except that for the right div, the animation has a strange behaviour.

It is the first time I'm trying to do something with animate(), so maybe I oversee somethin obvious. As you can see after clicking the "x" on the right div, it first moves to the bottom of the page, and after that it moves to the right place (which is pretty ugly). All I do in animate() is resetting the changed values to default, like on the first div. As in the first div I change only the margin, it pretty sure has something to do with the changing of the height. How can I suppress this behaviour and let it move directly to that position?

Browser: 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;  
}

Upvotes: 1

Views: 505

Answers (1)

MagePal Extensions
MagePal Extensions

Reputation: 17656

Take a look at http://jsfiddle.net/TFtMq – dbaseman

You may first want change thing like this to use callback function (A function to call once the animation is complete). http://api.jquery.com/fadeIn/

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

to

$('#firstViewLogin').fadeOut(500, function() {
    $("#afterViewLogin").fadeIn(500);
});

Upvotes: 4

Related Questions