jquery - 使用 jquery 动画切换 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

这将起到一个作用：

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

例子

动画示例

Answer 2

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

$(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
       });
   });
 });

Answer 3

切换浮点值： 可以有多种方法来做到这一点。检查 JQuery removeClass(...)，JQuery 网站addClass(...)上的文档

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

要为 div 设置动画，请在此处查看答案

Answer 4

看一下 jquery .animate() 这不是很漂亮，您需要使用动态值进行班次。 简单的虚拟动画

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