Как сделать плавное перемещение блока?

Question

[DivineDraft]

Как можно сделать плавное перемещение блока.

Есть конструкция, где Блок двигается внутри дива, но проблема в том, что при движение на 1px слишком медленно происходит смещение, поэтому было установлено значение 5:

$(document).keydown(function(e){
        if(!$div) return;
        
        switch(e.which){
            case 65:
                $div.css('left', $div.offset().left + 5);
                break;
            case 87:
                $div.css('top', $div.offset().top + 5);
                break;
            case 68:
                $div.css('left', $div.offset().left - 5);
                break;
            case 83:
                $div.css('top', $div.offset().top - 5);
                break;
                
        }           
        
    });

Теперь двигается достаточно быстро, но возникла проблема, что есть рывки, можно ли их как-то сгладить? Пробовал добавлять к стилям блока translate, но тогда оно постоянно тормозит и не правильно выполняет действие.

Или можно ли как-то сначала сделать плавное по 1px перемещение, а затем его плавное ускорение до 5px?

Answer 1

[Станислав]

На сколько я помню в jQuery есть animation, его и используй, тогда по идеи рывки должны исчезнуть. Если без jQuery то в цикле +1px надо делать. Или попробовать добавить в css transition, но я не знаю будет ли работать это в паре с js, надо смотреть.

А вобще судя по тому что нужно, лучше добавлять определенный класс блоку для сдвига, а в CSS уже определить transition и тогда будет счастье

Comments

[DivineDraft]

Благодарю, попробую.

Answer 2

[Сергей Попов]

Свойство, которое отвечает за плавность - transition. Translate отвечает за вид изменения, который происходит.
Рекомендую применять примерно следующую конструкцию. Элементу, который планируется анимировать добавлять свойство. transition: .3s all ease-in-out; .3s - идеальное время, которое кажется человеческому глазу наиболее плавным. all отвечает за виды анимации, на которое будет срабатывать это свойство. ease-in-out - наиболее плавный вид функции изменения. Она начинается медленно, ускоряется с пиком скорости в центре и замедляется к концу. Примерно так же действует человеческий организм и классическая физика, поэтому этот вид движения нам кажется наиболее приятным и понятным.

Comments

[DivineDraft]

Большое спасибо, попробую.