开关2浮动Div与jquery动画

嗨我已更新的代码有2个不同大小的div。他们需要使用CSS浮动来切换动画位置。开关2浮动Div与jquery动画

请参阅到目前为止的代码 - 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 
     }); 
    }); 
});

有没有办法让他们漂浮左右包装的？

非常感谢！

来源

2013-03-12 Sebastian

通过你的意思是动画，它应该是两者的其他浮点值可见过渡？ – 2013-03-12 08:35:00

是的，像2块互相交叉切换位置 – Sebastian 2013-03-12 08:43:59

对于过渡动画切换，你可以使用这个剪断：

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

来源

2013-03-12 08:45:25

嗨，这工作得很好，唯一的问题是当两个块躺在一个包装，他们跳出包装当窗口调整大小或一个较小的屏幕 - http：// jsfiddle .net/U6ADe/16/ – Sebastian 2013-03-12 08:57:58

看到[this]（http://jsfiddle.net/U6ADe/19/）fiddel – 2013-03-12 09:00:38

非常感谢，这没有把戏;） – Sebastian 2013-03-12 09:05:25

这将做一招：

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

Example

Example with animation

来源

2013-03-12 08:34:39 Morpheus

嗨，谢谢，有没有办法让他们动画切换位置？ – Sebastian 2013-03-12 08:40:36

看看第二个例子。 – Morpheus 2013-03-12 08:47:31

@Morpheus：你的jquery的力量的大粉丝:) – 2013-03-12 08:59:25

开关浮点值： 有可能做到这一点的多个方法。检查JQuery的removeClass(...)，在JQuery Website

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

设置动画的div，检查答案here

来源

2013-03-12 08:36:01

看看jquery .animate（）这不太好，你需要使用动态值作为shift。 Simple dummy animation

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

来源

2013-03-12 08:56:48

开关2浮动Div与jquery动画

回答

相关问题