Jquery: how to toggle/slide one div over another so it takes its place?

javascript jquery css css-animations

12,285

Solution 1

I'd use a float instead. Try this:

.green {
    width:400px;
    background-color:green;
    height:320px;
    float:left;
}
.red {
    background-color:red;
    height:320px;
}
#container {
    width:600px;
    overflow:hidden;
}
<div id="container">
    <div id="green" class="green">eezez</div>
    <div id="red" class="red">eezez</div>
</div>
<button id="action">Toggle Green !</button>

Solution 2

Add

 $('#green').slideToggle("fast");

then add css property

   .green {
    width:400px;
    background-color:green;
    display:inline-block;
    position:absolute;
    height:320px;
}

JSFIDDLE

12,285

Author by

yarek

Updated on June 14, 2022

Comments

yarek almost 2 years

My goal is to to create an animation (css / jquery), so green box slides (grows) over red one (red one is fixed). Then toggle it back : green shrinks and red comes back again.

Using ("#green").css("wdith") makes the red one being pushed and I want to avoid that.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

</head>

<body>
<style>
.green {
    width:400px;
    background-color:green;
    display:inline-block;
    height:320px;
}
.red{
    width:200px;
    background-color:red;
    display:inline-block;
    height:320px;   
}
</style>


<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>

    <script>
    $(function() {
        $("#action").click(function() {
            // toggle so green grows and takes red place (red does not move)
            // toggle so green shrinks and so red takes his initial place again
        });
    });
</script>

</div>
</body>
</html>

here is the fiddle:

http://jsfiddle.net/Sj575/