افکت Size در jQuery
دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 25 شهریور 1401افکت Size در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی میشود. افکت Size را میتوان با متد effect() استفاده کرد؛ این افکت اندازه یک عنصر را به عرض و ارتفاع مشخص تغییر میدهد.
ساختار افکت Size در jQuery
در اینجا نحو و ساختار ساده برای استفاده از این افکت آمده است:
selector.effect( "size", {arguments}, speed );
پارامترهای افکت
در اینجا تمام پارامترهای استفاده شده توسط این افکت توضیح داده شده است:
- from : حالت در ابتدا، معمولاً مورد نیاز نیست؛ این پارامتر یک شی خواهد بود و به شکل { height: .., width: .. } مقدار دهی میشود.
- to : ارتفاع و عرض برای تغییر اندازه؛ مقدار دهی این شی به شکل { height: .., width: .. } است
- origin : نقطه ناپدید شدن، این پارامتر یک آرایه است و به طور پیشفرض روی [‘middle’,’center’] تنظیم شده است
- scale : تعیین میکند که کدام قسمت از عنصر باید سایزش تغییر کند: «box» یا «محتوا content» یا «هردو both». مقدار box اندازه کادر حاشیه و پدینگ عنصر را تغییر میدهد و مقدار content هر محتوای داخل عنصر را تغییر میدهد، به صورت پیش فرض both است
مثال
در قطعه کد زیر یک مثال ساده آورده شده است که استفاده از این افکت را نشان میدهد:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#big").click(function(){
$(".target").effect( "size", { to: {width: 200,height: 200} }, 1000 );
});
$("#small").click(function(){
$(".target").effect( "size", { to: {width: 10,height: 10} }, 1000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click any of the buttons</p>
<button id = "big"> Big </button>
<button id = "small"> Small </button>
<div class = "target">
</div>
</body>
</html>
این مقاله در اینجا به پایان رسید، امیدواریم از مطالعه آن لذت برده باشید. برای دسترسی به لیست کامل افکتهای jQuery به مقاله بررسی جلوهها (Effects) در jQuery مراجعه کنید.
این مقاله چقدر براتون مفید بود؟