Home/ Questions/Q 8878857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:48:49+00:00

Here is a little sample. The two div s are supposed to float to

  • 0

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;  
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
});
    • 0