Wtyczki do efektów animacji

Wtyczki jQuery do efektów animacji umożliwiają tworzenie efektów wizualnych na stronie internetowej, takich jak przesuwające się elementy, rozwijane menu, podświetlanie elementów po najechaniu kursorem myszy i wiele innych. Dzięki nim można zwiększyć atrakcyjność strony i zrobić wrażenie na użytkownikach.

Wtyczka Animate, przesuwająca element w prawo:

								
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Przykład użycia wtyczki jQuery Animate</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        $(function() {
            $("#box").click(function() {
                $(this).animate({ left: "+=200px" }, 1000);
            });
        });
    </script>
</body>
</html>

Wyjaśnienie

W powyższym przykładzie po kliknięciu element o id "box", używamy funkcji animate() do przesunięcia elementu w prawo o 200 pikseli. Animacja trwa 1000 milisekund (czyli 1 sekundę). Dzięki temu użytkownik może łatwo interaktywnie przesuwać elementy na stronie internetowej.

Wtyczki do efektów animacji

Poniżej przedstawiam kilka popularnych wtyczek jQuery do efektów animacji:

Wtyczka Animate, przesuwająca element w prawo: