How can I use Jquery to slide one div over another and replace it in its position?

Question

How can I use Jquery to slide one div over another and replace it in its position?

I am working on creating a unique animation using CSS and jQuery. The animation involves a green box sliding (or growing) over a fixed red box, and then toggling back so that the green box shrinks while the red one reappears.

One issue I encountered was using $("#green").css("width") causing the red box to be pushed, which is something I want to avoid in my animation.

<!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>

If you'd like to see the code in action, check out the fiddle link below:

http://jsfiddle.net/Sj575/

javascript jquery css css-animations

Answer 1

Answer №1

To achieve the desired layout, it is recommended to use a float instead of other methods. Here is an example code snippet:

Example Code

.blue {
    width:300px;
    background-color:blue;
    height:250px;
    float:left;
}
.yellow {
    background-color:yellow;
    height:250px;
}
#wrapper {
    width:500px;
    overflow:hidden;
}
<div id="wrapper">
    <div id="blue" class="blue">content1</div>
    <div id="yellow" class="yellow">content2</div>
</div>
<button id="toggleBtn">Toggle Blue!</button>

Answer 2

To achieve the desired layout, it is recommended to use a float instead of other methods. Here is an example code snippet:

Example Code

.blue {
    width:300px;
    background-color:blue;
    height:250px;
    float:left;
}
.yellow {
    background-color:yellow;
    height:250px;
}
#wrapper {
    width:500px;
    overflow:hidden;
}
<div id="wrapper">
    <div id="blue" class="blue">content1</div>
    <div id="yellow" class="yellow">content2</div>
</div>
<button id="toggleBtn">Toggle Blue!</button>

Answer 3

Answer №2

Insert this code snippet:

 $('#blue').fadeToggle("slow");

Next, include the following CSS style:

   .blue {
    width:500px;
    background-color:blue;
    display:inline-block;
    position:relative;
    height:280px;
}

JSFIDDLE LINK

Answer 4

Insert this code snippet:

 $('#blue').fadeToggle("slow");

Next, include the following CSS style:

   .blue {
    width:500px;
    background-color:blue;
    display:inline-block;
    position:relative;
    height:280px;
}

JSFIDDLE LINK

Answer 5

Answer №3

Here's the solution I came up with:

Similar to user j08691, I also included float:left in both divs and added display:block and clear both to the button element to ensure it doesn't align on the left.

<body>
<style>
.green {
width:400px;
background-color:green;
float: left;
height:320px;
}

.red{
width:200px;
background-color:red;
float: left;
height:320px;   
}

#action{
display: block;
clear:both;
margin-top:2em;
}
</style>


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

<button id="action" >Toggle Green !</button>

I created two separate functions to ensure that the button triggers only one event. Using preventDefault() method helps in achieving this. Through animate(), I increased the width of green while decreasing the red, eventually making the green disappear and red taking its place upon clicking 'action'.

<script>
    $(document).ready(function() {

        $("#action").one('click', toggleGreen);
            // toggle so green grows and takes red's position (red remains stationary)
            function toggleGreen(){
                $("#green").animate({
                    width:'600px'
                });
                $("#red").animate({
                    width:'100px'
                }).hide(2000);
                preventDefault();
            }

        $("#action").on('click', function(){
            // toggle so green shrinks back and red regains its original position
            $("#green").hide(2000);
            $("#red").animate({
                width:'600px'
            }).show(3000);
        })
    });
</script>

I trust this explanation is helpful!

Answer 6

Here's the solution I came up with:

Similar to user j08691, I also included float:left in both divs and added display:block and clear both to the button element to ensure it doesn't align on the left.

<body>
<style>
.green {
width:400px;
background-color:green;
float: left;
height:320px;
}

.red{
width:200px;
background-color:red;
float: left;
height:320px;   
}

#action{
display: block;
clear:both;
margin-top:2em;
}
</style>


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

<button id="action" >Toggle Green !</button>

I created two separate functions to ensure that the button triggers only one event. Using preventDefault() method helps in achieving this. Through animate(), I increased the width of green while decreasing the red, eventually making the green disappear and red taking its place upon clicking 'action'.

<script>
    $(document).ready(function() {

        $("#action").one('click', toggleGreen);
            // toggle so green grows and takes red's position (red remains stationary)
            function toggleGreen(){
                $("#green").animate({
                    width:'600px'
                });
                $("#red").animate({
                    width:'100px'
                }).hide(2000);
                preventDefault();
            }

        $("#action").on('click', function(){
            // toggle so green shrinks back and red regains its original position
            $("#green").hide(2000);
            $("#red").animate({
                width:'600px'
            }).show(3000);
        })
    });
</script>

I trust this explanation is helpful!

How can I use Jquery to slide one div over another and replace it in its position?

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the 405 error in my post request?

What could be causing the split() function to work on one condition but not on the other?

Combining two JSON arrays into a single array using Node.js

Execute the .click() function on an ajax element using a different element (not experiencing the issue of "click not working after ajax")

The performance of Mongoose queries is lagging, regardless of using lean

What is the best way to extract the ID from an event in TypeScript?

The MarkCompactCollector was unsuccessful in promoting the young object due to a failed allocation process

Guide to retrieving table data using jQuery in a Vue.js function

Tips for maintaining the webcam video in the center of the screen even when the height is set to 100% and the window is being resized

What is the best way to create a distinct key for the key prop in my map function within a React component?

Placing the overview right beneath the navigation bar in Bootstrap

Influencing location preferences in Google's place search

Customizing MUI DataGrid: Implementing unique event listeners like `rowDragStart` or `rowDragOver`

Tips on choosing a button and applying custom styles with emotion styles in MUI

Obtain the correct form ID format that is dynamically loaded following the execution of an AJAX function

Converting MSK time to SST time using JavaScript: A Handy Guide

Adjust the SVG to match the dimensions of the label, which may vary in both

I am experiencing an issue with my meteor insert not functioning when triggered by a click event. Oddly, no error messages are being

Colorful Paper Trail Logging

Obtain form data as an object in Vue when passed in as a slot