JQUERY примеры анимации

Последнее обновление на 16.12.2022

JQUERY код анимации скрытия и раскрытия блока div по ссылке

$(document).ready(function(){
    $(".button1").click(function(){ // событие нажатие кнопки
        $("#space").slideToggle("slow"); // // 0.6 секунды
        //$("#space").slideToggle("fast"); // 0.2 секунды
        //$("#space").slideToggle(2000); // выполняется 2 секунды
        $(this).toggleClass("text");
        return false;
        
    });
});

Код CSS

#space {
width:100px;
height:100px;
background:green;
display: none;
}
.text {
font-size:20pt;
}

Код html

<a href="#" class="button1">Нажми</a>
<div id="space"><div>

Пример здесь

Анимация добавления и удаления класса с помощью jQuery — анимация увеличения (уменьшения) блока

 // работает при наведении на него курсора мыши
$(document).ready(function() {

  $('#anim').hover(
    function() {
      $(this).addClass('orange');
    },
    function() {
      $(this).removeClass('orange');
    }
  );

});

Код CSS

#anim{
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.green{
    background-color: green;
    width: 50px;
    height: 50px;
}
.orange{
    background-color: orange;
    width: 200px;
    height: 200px;
}

Код html

<div id="anim" class="green"></div>

Пример здесь

Анимация вращения div jQuery

function Rotation(a){
    $({deg: 0}).animate({deg: a}, {
    duration: 3000,
        step: function(b, c){
            $("#anim").css({
                 transform: "rotate(" + b + "deg)"
            });
        }
    });
}

Rotation(720);

Код CSS

#anim {
    width: 100px;
    height: 100px;
    background: orange;
}

Код html

 <div id='anim'></div>

Пример здесь

Анимация с использованием ScrollTop jQuery

function scrollTopAnimation() {
$("html, body").animate({ scrollTop: "0" }, 300);
}

Код CSS

.animscroll {
            background-color: orange;
            height: 7000px;
        }

Код html

<div class="animscroll">Text</div>
<button onclick="scrollTopAnimation()">Нажми, чтобы быть наверху</button>

Пример здесь