使用jquery动画切换2个浮动div

嗨，我已经更新了代码，有两个不同大小的div。他们需要使用css浮动切换动画位置

请参阅迄今为止的代码-

有没有办法让它们在包装纸左右浮动

非常感谢

这会有一个窍门：

$("#switch").on("click", function () {
    $(".square").each(function () {
        var floatEl = ($(this).css("float") == "left") ? "right" : "left";
        $(this).css("float", floatEl);
    });
});

---

切换浮点值： 有多种方法可以做到这一点。检查JQuery

removeClass（…）

，

addClass（…）

上的文档

您还可以在同一网站上查看

css（…，…）

方法文档以实现此目的

---

要设置div的动画，请检查答案

以获得带有过渡动画的开关。您可以使用此剪接：

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

你只需要记住填充和边距选项

使用包装器：

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

---

看看jquery.animate（） 这不太好，您需要使用动态值进行转换。

---

通过动画，你的意思是，这应该是一个从两个块到另一个浮点值的可见转换？是的，就像两个块相互交叉切换位置一样。谢谢，有没有办法让它们切换位置？看第二个例子。@Morpheus:jquery的超级粉丝：）您好，这很有效，唯一的问题是，当两个块位于包装器中时，当窗口调整大小或屏幕变小时，它们会跳出包装器-嗨，我已经将div更改为不同的大小，你能看看小提琴，看看为什么会跳到对方身上吗？谢谢

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

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