دوستان گرامی سلام امیدوارم که روز خوبی را پست سر گذاشته باشین و با اموزش امروز ماهمراه بمانید .درمورد Color Animation در Jquery UI کمی میخوام براتون آموزش بگذارم.
jQueryUI چند متد مرکزی jQuery را طوری گسترش می دهد که می توانید انتقال های مختلف برای یک عنصر را متحرک سازی کنید. یکی از آنها متد animate است. jQueryUI متد jQuery animate را برای پشتیبانی از متحرک سازی رنگ، گسترش می دهد. شما می توانید یکی از چندین پراپرتی CSS را رنگ یک عنصر را تعریف می کند، متحرک سازی کنید. در زیر پراپرتی های CSS را مشاهده می کنید که متد animate از آنها پشتیبانی می کند.
backgroundColor: رنگ زمینه ی عنصر را تنظیم می کند.
borderTopColor: رنگ مربوط به قسمت بالای مرز عنصر را تنظیم می کند.
borderBottomColor: رنگ قسمت پایین مرز عنصر را تنظیم می کند.
borderLeftColor: رنگ سمت چپ مرز عنصر را تنظیم می کند.
borderRightColor: رنگ سمت راست مرز عنصر را تنظیم می کند.
color : رنگ متن عنصر را تنظیم می کند.
outlineColor: رنگ اوت لاین را تنظیم می کند؛ برای تاکید بر روی عنصر استفاده می شود.
ترکیب:
در زیر ترکیب مربوط به متد jQueryUI animate را مشاهده می کنید:
$(“#selector”).animate(
{
backgroundColor: “black”,
color: “white”
}
);
می توانید به تعداد دلخواه پراپرتی برای این متد تنظیم کنید که به وسیله ی کاما مجزا شده اند.
مثال:
مثال زیر استفاده از متدهای addClass() را توضیح می دهد:
script>
script>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px;
background-color: #ccc;
color: white;
}
style>
$(document).ready(function () {
$(‘#button-1’).click(function () {
$(‘#animTarget’).animate({
backgroundColor: “black”,
color: “white”
});
});
});
script>
head>
Hello!
div>
body>
html>