Анимировать плавающий элемент в противоположных плавающих точках

0

Поэтому я хочу, чтобы можно было щелкнуть квадрат посередине, который должен сдвигать верхний левый прямоугольник вправо по горизонтали, а верхний правый квадрат будет скользить по низу вертикально и т.д.

Продолжительность составляет 2 секунды для слайда.

http://jsfiddle.net/meD8y/

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

не уверен, как включить.animate

2 ответа

0

Посмотри на это

играть на скрипке

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

Свойство 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');
    });
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню