開關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動畫

回答

相關問題