將浮動元素動畫到浮動點的相反位置

Question

所以我希望能夠點擊中間的方塊，它應該將左上方的方塊向右滑動，而右上方的方塊將垂直滑動到底部等。

幻燈片持續時間爲2秒。

http://jsfiddle.net/meD8y/

$(document).ready(function(){ 
    $("#container").click(function(){ 
     $("#box1, #box3").css("float", "right"); 
     $("#box2, #box4").css("float", "left"); 
    }); 
}); 

不知道如何把.animate

Answer 1

float屬性無法進行動畫處理。但是，您可以動畫定位。

這裏有一個JS小提琴完成你的目標：http://jsfiddle.net/ygP3r/

HTML

<div id="box-1" class="move"></div> 
<div id="box-2"></div> 
<div id="box-3" class="move"></div> 
<div id="box-4"></div> 

CSS

div { 
    display: block; 
    width: 100px; 
    height: 100px; 
    position: relative; 
    left: 0; 
    cursor: pointer; 
    transition: left 2s ease; 
    -webkit-transition: left 2s ease; 
    -moz-transition: left 2s ease; 
    -ms-transition: left 2s ease; 
    -o-transition: left 2s ease; 
} 

.move { 
    left: calc(100% - 100px); 
    left: -webkit-calc(100% - 100px); 
} 

#box-1 { 
    background-color:red; 
} 

#box-2 { 
    background-color:blue; 
} 

#box-3 { 
    background-color:green; 
} 

#box-4 { 
    background-color:orange; 
} 

JS

$(document).ready(function() {  
    $('div').click(function() { 
     $(this).toggleClass('move'); 
    }); 
}); 

Answer 2

看這個

fiddle

var click_counter = 0; 
$("#rotate").click(function() { 
    if(click_counter < 4) { 
     click_counter++; 
    } else { 
     click_counter = 1 
    } 

    switch(click_counter) { 
     case 1: 
      $("#box1").html("3"); 
      $("#box1").css("background-color","#999999"); 
      $("#box2").html("1"); 
      $("#box2").css("background-color","#ffffff"); 
      $("#box3").html("4"); 
      $("#box3").css("background-color","#666666"); 
      $("#box4").html("2"); 
      $("#box4").css("background-color","#cccccc"); 
      break; 
     case 2: 
      $("#box1").html("2"); 
      $("#box1").css("background-color","#cccccc"); 
      $("#box2").html("4"); 
      $("#box2").css("background-color","#666666"); 
      $("#box3").html("1"); 
      $("#box3").css("background-color","#ffffff"); 
      $("#box4").html("3"); 
      $("#box4").css("background-color","#999999"); 
      break; 
     case 3: 
      $("#box1").html("4"); 
      $("#box1").css("background-color","#666666"); 
      $("#box2").html("3"); 
      $("#box2").css("background-color","#999999"); 
      $("#box3").html("2"); 
      $("#box3").css("background-color","#cccccc");  
      $("#box4").html("1"); 
      $("#box4").css("background-color","#ffffff"); 
      break; 
     case 4: 
      $("#box1").html("1"); 
      $("#box1").css("background-color","#ffffff"); 
      $("#box2").html("2"); 
      $("#box2").css("background-color","#cccccc"); 
      $("#box3").html("3"); 
      $("#box3").css("background-color","#999999"); 
      $("#box4").html("4"); 
      $("#box4").css("background-color","#666666"); 
      break; 
    } 
});