Question

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

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

Example

Example with animation

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

Answer 3

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

上的JQuery removeClass(...)，addClass(...)文档

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

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

Answer 4

看看jquery .animate（）这并不漂亮，您需要为班次使用动态值。 Simple dummy animation

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

使用jquery动画切换2浮动Div

4 个答案: