使用jQuery动画切换两个浮动的Div。

Question

你好，我已经更新了代码，现在有两个不同大小的div。它们需要使用css浮动动画来交换位置。

请查看目前的代码 - 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
        });
    });
});

他们是否有办法浮动到包装的左右两侧？

非常感谢！

- Sebastian

---

你的意思是通过动画来实现两个浮点值之间的可见过渡？ - Mario Wenig

是的，就像两个块交叉着改变位置。 - Sebastian

Answer 1

这个可以解决问题：

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

示例

带动画的示例

- Morpheus

---

您好，谢谢！是否可以通过某种方式使它们交换位置并产生动画效果？ - Sebastian

看一下第二个例子。 - Morpheus

@Morpheus：我是你 jQuery 技能的忠实粉丝 :) - Mario Wenig

Answer 2

如果您需要带有过渡动画的开关，可以使用以下代码：

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

jsfiddel

只需记住填充和边距选项...

使用包装器：

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

- Jan Hommes

---

嗨，这个很好用，唯一的问题是当两个块位于一个包装器中时，当窗口调整大小或屏幕变小时，它们会跳出包装器 - http://jsfiddle.net/U6ADe/16/ - Sebastian

嗨，我已经将这些div改为了不同的大小，你能看一下这个Fiddle并告诉我它们为什么会相互重叠吗？谢谢。 - Sebastian

Answer 3

切换浮点值： 有多种方法可以实现此操作。请查看JQuery removeClass(...)，addClass(...)文档JQuery网站。

您还可以在同一网站上查看css(...,...)方法的文档以实现此操作。

要对div进行动画处理，请查看此处的答案。

- Mudasser Hassan

Answer 4

看一下jquery .animate()。 这不太好看，你需要使用动态值来进行移动。 简单的虚拟动画

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

- Mario Wenig