带有jquery动画的Switch 2浮动Div

Question

嗨，我已经更新了代码，有2个不同大小的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
        });
    });
});

有没有办法让它们在包装器的左右浮动？

非常感谢！

Answer 1

对于带有过渡动画的开关，可以使用以下代码片段：

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

jsfiddel

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

使用wrapper：

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

Answer 2

这将会有一个技巧：

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

Example

Example with animation

Answer 3

切换浮点值：有多种方法可以做到这一点。查看JQuery Website上的JQuery removeClass(...)、addClass(...)文档

您还可以查看同一网站上的css(...,...)方法文档来实现这一点。

要使div具有动画效果，请检查答案here