Animating two divs simultaneously with JQueryUI

Question

Animating two divs simultaneously with JQueryUI

On my webpage, I have two full-width divs that I want to show one at a time using JQueryUI slide transitions. The desired effect is for one div to slide away to the left while the other slides in from the right. However, the current issue is that both animations occur simultaneously, causing the second div to initially appear below the first before sliding up to replace it at the end of the animation. How can I adjust the positioning of the second div to create a seamless sliding motion?

Here's the code snippet:

<script type="text/javascript">
    $('#schedule').hide();
    $( '#changer' ).click(function() {
            $("#roster").toggle( "slide", {direction: "left"}, "fast" );
            $("#schedule").toggle("slide", { direction: "right"}, "fast");

            if ($("#changer").html() == 'Schedule View')
                $("#changer").html('Roster View');
            else
                $("#changer").html("Schedule View");
        });
</script>

jquery css jquery-ui

Answer 1

Answer №1

Take a look at this demo: http://jsfiddle.net/FkNa2/2/

The key part of the code is the css positioning,

// html
<p>some content here </p>
<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>
<button>Toggle</button>

// css
#div1{
    width: 500px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 0px;
    left: 0px;
}

#div2{
    width: 500px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}

.container {
    width: 800px;
    position: relative;
    left: 100px;
    height: 100px;
}

The trick here is to make sure that both divs are positioned in the same place on the screen. This is achieved by using absolute positioning for both, with coordinates relative to the outer div. You can find more information on this technique in the answers provided in this question

Both “relative” and “absolute” positioning are really relative, just with different framework. “Absolute” positioning is relative to the position of another, enclosing element. “Relative” positioning is relative to the position that the element itself would have without positioning.

It depends on your needs and goals which one you use. “Relative” position is suitable when you wish to displace an element from the position it would otherwise have in the flow of elements, e.g. to make some characters appear in a superscript position. “Absolute” positioning is suitable for placing an element in some system of coordinates set by another element, e.g. to “overprint” an image with some text.

As a special case, use “relative” positioning with no displacement (just setting position: relative) to make an element a frame of reference, so that you can use “absolute” positioning for elements that are inside it (in markup).

Answer 2

Take a look at this demo: http://jsfiddle.net/FkNa2/2/

The key part of the code is the css positioning,

// html
<p>some content here </p>
<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>
<button>Toggle</button>

// css
#div1{
    width: 500px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 0px;
    left: 0px;
}

#div2{
    width: 500px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}

.container {
    width: 800px;
    position: relative;
    left: 100px;
    height: 100px;
}

The trick here is to make sure that both divs are positioned in the same place on the screen. This is achieved by using absolute positioning for both, with coordinates relative to the outer div. You can find more information on this technique in the answers provided in this question

Both “relative” and “absolute” positioning are really relative, just with different framework. “Absolute” positioning is relative to the position of another, enclosing element. “Relative” positioning is relative to the position that the element itself would have without positioning.

It depends on your needs and goals which one you use. “Relative” position is suitable when you wish to displace an element from the position it would otherwise have in the flow of elements, e.g. to make some characters appear in a superscript position. “Absolute” positioning is suitable for placing an element in some system of coordinates set by another element, e.g. to “overprint” an image with some text.

As a special case, use “relative” positioning with no displacement (just setting position: relative) to make an element a frame of reference, so that you can use “absolute” positioning for elements that are inside it (in markup).

Answer 3

Answer №2

Increase the z-index (w3schools) value of the div element.

Think of it like different levels or layers on a website – lower numbers are at the bottom, higher numbers are at the top.

Answer 4

Increase the z-index (w3schools) value of the div element.

Think of it like different levels or layers on a website – lower numbers are at the bottom, higher numbers are at the top.

Animating two divs simultaneously with JQueryUI

Answer №1

Answer №2

Similar questions

adjusting the size of a CSS image sprite

tips for revealing content in a div by sliding from right to left

Creating a blank div in bootstrap without any content inside and filling it with a background color

Is there a more straightforward alternative method to retrieve the title attribute from an input within a table cell?

Checkbox customization that shifts position when clicked

Leverage Summernote in conjunction with Vue components to dynamically switch their locations

Only one execution of the ajax success function (using the html method) is triggered

When applying the 'aspect-ratio: 1' property to create square cells, the 3 by 3 CSS Grid exceeds the boundaries of the container with overflowing squares

Click on the nearest Details element to reveal its content

Executing jQuery AJAX Request to PHP File with JSON Response

Disabling a button in AngularJS until an input field has a value: step-by-step guide

Mentioning a component that is loaded dynamically

Update displayed information according to the dropdown option selected

Custom Native Scrollbar

How can I make a basic alert box close after the initial click?

navLinkDayClick function from FullCalendar

Troubleshooting: jQuery AJAX not Invoking C# Method in ASP.NET MVC Application

"Check if jQuery contains a specific number using the .contains()

Changing animation during mouse hover off

How can I transform a string into a date using jQuery specifically for Internet Explorer?