آموزش افکت های محو شدن Fading در JQuery

بهاره حسنیبهاره حسنی
115 بازدید
[cdb_box_content]

با عرض سلام خدمت همراهان همیشگی وب سایت پرنیان طرح

با آموزش مبحث افکت های محو شدن Fading در JQuery در خدمتنان هستیم.

با استفاده از JQuery میتوانید عناصر را در معرض دید مخاطب قرار دهید یا از دیدش خارج کنید.

در ادامه این مطلب همراه پرنیان طرح باشید.

[/cdb_box_content]
[cdb_box_content]

مقدمه


در این بخش به آموزش jQuery و افکت ها یا همان Fading میپردازیم.

jQuery عمل محو کردن یک عنصر در صفحه را برای ما انجام میدهد.

۴ متد برای ساخت افکت های fade بر روی المان های Html وجود دارد.

۱-متد ()fadeIn

۲-متد ()fadeOut

۳-متد ()fadeToggle

۴-متد ()fadeTo

[/cdb_box_content]
[cdb_box_content]

متد ()fadeIn در JQuery :

از این متد برای محو شدن یک عنصر پنهان استفاده میشود.

پارامتر سرعت اختیاری مدت زمان محو شدن افکت را مشخص میکند.

پارامتر برگشت اختیاری تابعی است که بعد از اتمام زمان محو شدن افکت اجرا میشود.

مثال زیر متد ()fadeIn را با پارامتر های مختلف نشان میدهد.

مثال :

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3″).fadeIn(3000);
});
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id=”div1″ style=”width:80px;height:80px;display:none;background-color:red;”></div><br>
<div id=”div2″ style=”width:80px;height:80px;display:none;background-color:green;”></div><br>
<div id=”div3″ style=”width:80px;height:80px;display:none;background-color:blue;”></div>

</body>

[/php]

خروجی این مثال را در این لینک میتوانید ببینید.

[/cdb_box_content]
[cdb_box_content]

متد ()fadeOut در jQuery :

از این متد برای محو کردن یک عنصر مرئی استفاده میشود.

پارامتر سرعت اختیاری مدت زمان محو شدن افکت را مشخص میکند ، که میتواند این مقادیر را بگیرد:

سرعت کند ، سریع ، یا میلی ثانیه.

پارامتر سرعت اختیاری ، تابعی است که بعد از اتمام زمان محو شدن افکت اجرا میشود.

مثال زیر متد ()fadeOut را با پارامتر های مختلف نشان میدهد.

مثال :

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3″).fadeOut(3000);
});
});
</script>
</head>
<body>

<p>Demonstrate fadeOut() with different parameters.</p>

<button>Click to fade out boxes</button><br><br>

<div id=”div1″ style=”width:80px;height:80px;background-color:red;”></div><br>
<div id=”div2″ style=”width:80px;height:80px;background-color:green;”></div><br>
<div id=”div3″ style=”width:80px;height:80px;background-color:blue;”></div>

</body>

[/php]

خروجی این مثال را در این لینک ببینید.

[/cdb_box_content]
[cdb_box_content]

متد ()fadeToggle در jQuery :

این متد میتواند عناصر انتخابی پنهان را با افکت محو شدن پنهان کند.

و اگر عنصر انتخابی در حالت در حالت نمایش باشد آن را محو میکند.

پارامتر سرعت اختیاری مدت زمان محو شدن افکت را مشخص میکند ، که میتواند این مقادیر را بگیرد:

سرعت کند ، سریع ، یا میلی ثانیه.

مثال زیر متد ()fadeToggle را با پارامترهای مختلف نشان میدهد.

مثال :

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3″).fadeToggle(3000);
});
});
</script>
</head>
<body>

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>

<div id=”div1″ style=”width:80px;height:80px;background-color:red;”></div>
<br>
<div id=”div2″ style=”width:80px;height:80px;background-color:green;”></div>
<br>
<div id=”div3″ style=”width:80px;height:80px;background-color:blue;”></div>

</body>

[/php]

خروجی مثال را در این لینک مشاهده کنید.

[/cdb_box_content]
[cdb_box_content]

متد ()fadeTo در jQuery :

با این متد میتوانیم عنصرمان را تا شفافیت خاصی محو کنیم.

و علاوه بر دو مقدار ورودی قبل ، میزان شفافیت را نیز میتوان تنظیم کرد.

مثال :

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeTo(“slow”, 0.15);
$(“#div2”).fadeTo(“slow”, 0.4);
$(“#div3”).fadeTo(“slow”, 0.7);
});
});
</script>
</head>
<body>

<p>Demonstrate fadeTo() with different parameters.</p>

<button>Click to fade boxes</button><br><br>

<div id=”div1″ style=”width:80px;height:80px;background-color:red;”></div><br>
<div id=”div2″ style=”width:80px;height:80px;background-color:green;”></div><br>
<div id=”div3″ style=”width:80px;height:80px;background-color:blue;”></div>

</body>

[/php]

خروجی مثال را در این لینک ببینید.

[/cdb_box_content]
دسته بندی JQuery
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

30+ محصولات
234+ سفارشات تکمیل شده
1701+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت