Animate with jQuery to swap the positions of two floating divs

Question

Animate with jQuery to swap the positions of two floating divs

Hello, I recently made some updates to the code by adding 2 divs of different sizes. I am trying to achieve a switching animation using CSS floats for these divs.

If you'd like to take a look at the current code, please visit - http://jsfiddle.net/jz5VW/

jQuery(function () {
    jQuery('#switch').click(function () {
        jQuery('#one').animate({
            left: jQuery("#two").offset().left - jQuery("#featured-top").offset().left
        });
        jQuery('#two').animate({
            right: jQuery("#two").offset().left - jQuery("#featured-top").offset().left
        });
    });
});

I'm wondering if there is a way for them to align to the right and left of the wrapper?

Thank you in advance!

jquery html css jquery-animate css-float

Answer 1

Answer №1

Here is a code snippet for implementing transition animation on a switch:

$(function() {
   $('#switch').click(function() {
      $('#one').animate({left:$("#two").offset().left}); 
      $('#two').animate({right:$("#two").offset().left});
   });
});

View the implementation in jsFiddle.

Remember to consider padding and margin options while using this code.

If you have a wrapper element, here's how you can modify the code:

$(function () {
   $('#switch').click(function () {
       $('#one').animate({
           left: $("#two").offset().left-$("#wrapper").offset().left
       });
       $('#two').animate({
           right: $("#two").offset().left-$("#wrapper").offset().left
       });
   });
 });

Answer 2

Here is a code snippet for implementing transition animation on a switch:

$(function() {
   $('#switch').click(function() {
      $('#one').animate({left:$("#two").offset().left}); 
      $('#two').animate({right:$("#two").offset().left});
   });
});

View the implementation in jsFiddle.

Remember to consider padding and margin options while using this code.

If you have a wrapper element, here's how you can modify the code:

$(function () {
   $('#switch').click(function () {
       $('#one').animate({
           left: $("#two").offset().left-$("#wrapper").offset().left
       });
       $('#two').animate({
           right: $("#two").offset().left-$("#wrapper").offset().left
       });
   });
 });

Answer 3

Answer №2

You can use this code snippet to achieve the desired effect:

$("#toggle").on("click", function () {
    $(".box").each(function () {
        var position = ($(this).css("position") == "absolute") ? "relative" : "absolute";
        $(this).css("position", position);
    });
});

Check out this example

Example with added animations

Answer 4

You can use this code snippet to achieve the desired effect:

$("#toggle").on("click", function () {
    $(".box").each(function () {
        var position = ($(this).css("position") == "absolute") ? "relative" : "absolute";
        $(this).css("position", position);
    });
});

Check out this example

Example with added animations

Answer 5

Answer №3

Updating Float Values: There are various methods to accomplish this task. Explore JQuery's removeClass(...) and addClass(...) functions by visiting the official JQuery Website

Another option is to refer to the documentation for the css(...,...) method on the same website.

If you want to animate divs, follow the solution provided in this thread

Answer 6

Updating Float Values: There are various methods to accomplish this task. Explore JQuery's removeClass(...) and addClass(...) functions by visiting the official JQuery Website

Another option is to refer to the documentation for the css(...,...) method on the same website.

If you want to animate divs, follow the solution provided in this thread

Answer 7

Answer №4

To achieve a smooth animation effect, consider utilizing jQuery's .animate() function. It may require using dynamic values for the transition to appear seamless. Check out this simple animated example

$('#switch').on("click", function ()  { 
    $('#one').animate({
        right: '-=500',
      }, 5000, function() {})
    $('#two').animate({
        right: '+=500',
      }, 5000, function() {})
});

Answer 8

To achieve a smooth animation effect, consider utilizing jQuery's .animate() function. It may require using dynamic values for the transition to appear seamless. Check out this simple animated example

$('#switch').on("click", function ()  { 
    $('#one').animate({
        right: '-=500',
      }, 5000, function() {})
    $('#two').animate({
        right: '+=500',
      }, 5000, function() {})
});

Animate with jQuery to swap the positions of two floating divs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A technique, such as regular expressions, can be used to detect the quantity of newline characters in the text entered by the user in a text area

What is the best way to send a group of objects to a server?

Column content merging in BS layout

Switch out the image in the dropdown and update the button once it is selected

What is the best way to make a bootstrap component (container) stretch to the full width and height of the window when it first loads, and which

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

Positioning of the navigation menu

Modify input value using jQuery upon moving to the next step

The Kendo UI Date Selection Tool

Get the value of a node in jsTree

Causing an element to extend beyond its parent element's boundaries

Changes in browser size will not affect the height

What is causing my server to mysteriously alter the style of index.html?

Unique layout design that organizes calendar using nested divs with flexbox - no

css Apply styles to form controls only if they are not empty

Setting up Google Analytics Site Search without Query Parameters in the URL using JQUERY

Aligning Cards using Bulma Styles

Office Outlook Client experiencing incorrect div width

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Tips on resolving the Cross-Origin Read Blocking (CORB) error when blocked cross-origin response while using Postman