جواب تمرین

جواب تمرین این جلسه:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Document</title>
</head>
<body dir="rtl">
    <button class="test"> کلیک کنید </button>
    <div class="test1"></div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>

 body {
            background-color: rgb(63, 63, 63);
        }
        .test {
            background-color: rgb(80, 112, 255);
            width: 120px;
            margin: 10px;
            text-align: center;
        }
        .test1 {
            width: 80px;
            height: 80px;
            position: relative;
            background-color: red;
            margin: 40px;
        }

$(document).ready(function () {
    $(".test").click(function () {
        var x = $(".test1");
x.animate({right: "150px", backgroundColor: 'blue' },1000);
x.animate({right: "300px", backgroundColor: 'rgb(9, 199, 50)' },1000);
x.animate({top: "150px", backgroundColor: 'rgb(65, 52, 149)' },1000);
x.animate({top: "300px", backgroundColor: 'rgb(24, 231, 197)' },1000);
x.animate({right: "150px", backgroundColor: 'yellow' },1000);
x.animate({right: "0px", backgroundColor: ' rgb(199, 22, 199)' },1000);
x.animate({top: "150px", backgroundColor: 'rgb(226, 95, 56)' },1000);
x.animate({top: "0", backgroundColor: 'red' },1000);
    });
});

من سرچی هم که انجام دادم فهمیدم برای اینکه بتونیم رنگ background رو تغییر بدیم باید از jQuery UI استفاده کنیم

و از این CDN هم میشه استفاده کرد:

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>