Поэтому я хочу, чтобы можно было щелкнуть квадрат посередине, который должен сдвигать верхний левый прямоугольник вправо по горизонтали, а верхний правый квадрат будет скользить по низу вертикально и т.д.
Продолжительность составляет 2 секунды для слайда.
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").css("float", "right");
$("#box2, #box4").css("float", "left");
});
});
не уверен, как включить.animate
Посмотри на это
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;
}
});
Свойство float не может быть анимировано. Однако вы можете анимировать позиционирование.
Здесь JS Fiddle выполняет свою задачу: 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');
});
});