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

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List

Introducing the new default in Google Chrome: Now accessing window.opener for target="_blank" links after rel="noopener" is the standard feature

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

Unable to reveal hidden text with invisible formatting (font-size: 0)

Utilizing jQuery to attach events to dynamically inserted elements in the DOM

Tips on assigning a reference to an element that has not been rendered yet

Switch from using jQuery to vanilla JavaScript for handling POST requests

What is the best way to appropriately update a partial that displays another partial (refreshing with JavaScript leads to a page within a page)?

There is a lack of 'Access-Control-Allow-Origin' header, resulting in no access to the API

PHP is capable of showing echo statements from the function, however it does not directly showcase database information

Guide on creating a square within an element using JavaScript

Search field in DataTables appears to be misaligned

Trouble arises when adding a .js script to the webpage

The process of obtaining HTML input using JavaScript

When a user accesses a page, the UI-router shows the raw code in the UI-views

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

Retrieving the chosen option in Vue.js when the @change event occurs

Bootstrap slider aligned to the right side

Should I implement jquery within angular 2, or opt for the current css/js frameworks available?