جواب تمرین
4
جواب تمرین این جلسه:
<!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>
برای پاسخ دادن به این سوال شما باید در دوره عضو باشید .