آموزش متد Effect در JqueryUI

سلام و روز به خیر خدمت شما کاربران گرامی و عزیز ، امیدوارم که حال شما خوب باشه. با اموزش متدها در jquery در خدمت شما هستم.

JqueryUI – Effect

این فصل در مورد متد effect() بحث خواهد کرد که یکی از متدهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد یک jQueryUI انیمیشن را برای برای عناصری به کار می گیرد که نیازی به نمایش دادن یا پنهان کردن آن نیست.

ترکیب:

متد effect() دارای ترکیب زیر می باشد:

effect( effect [, options ] [, duration ] [, complete ] )

Parameter

Description

effect

این پارامتر، رشته ای است که افکتی را نمایش می دهد که برای تغییر استفاده می شود.

options

این پارامتر از نوع Object است و تنظیمات خاص افکت و easing را نشان می دهد. علاوه بر این هر افکت دارای مجموعه گزینه های خود می باشد که می تواند در بین چند افکت در جدول افکت های jQueryUI به عنوان افکت مشترک تعیین شود.

duration

این پارامتر از نوع عدد یا رشته می باشد و عدد مربوطبه زمان افکت را به هزارم ثانیه نشان می دهد. مقدار پیش فرض آن ۴۰۰ است.

complete

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

افکت های jQueryUI

جدول زیر افکت های مختلفی را توصیف می کند که با متد effects() استفاده می شوند.

Effect

Description

blind

این افکت عنصر را به شیوه ی پنجره ی کور نشان می دهد یا پنهان می کند: با حرکت بالا و پایین پایینی و یا راست و چپ، بسته به مسیر و سبک تعیین شده.

bounce

باعث می شود که عنصر در حالت پرش در یک مسیر افقی یا عمودی ظاهر شود، که عنصر را به طور انتخابی پنهان کرده و یا نمایان می سازد.

clip

با حرکت مرزهای روبه روی عنصر با یکدیگر، عنصر را پنهان کرده یا نمایان می سازد تا اینکه مرزها در وسط به یکدیگر برسند.

drop

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

explode

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

fade

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

fold

با تنظیم مرزها به داخل و یا خارج، عنصر را نمایش داده و یا پنهان می کند، سپس همین کار را برای مجموعه ی دیگری از مرزها انجام می دهد.

highlight

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

puff

با تنظیم میزان کدری عنصر، آن را در جای خود باز کرده و یا می بندد.

pulsate

قبل از اینکه اطمینان حاصل کند که عنصر همانطور که تعیین شده، نمایش داده می شود یا پنهان می شود، میزان کدری عنصر را تنظیم می کند.

scale

عنصر را با یک درصد خاص باز کرده و یا می بندد.

shake

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

size

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

slide

عنصر را طوری جابه جا می کند که به نظر می رسد روی صفحه یا خارج صفحه اسلاید شده است.

transfer

یک عنصر موقت اوت لاین را محرک سازی می کند که باعث می شود عنصر به عنصری دیگر منتقل شود. ظاهر عنصر اوت لاین باید از طریق قوانین CSS برای گروه ui-effects-transfer تعریف شود یا گروه به عنوان یک گزینه تعیین شود.

مثال:

مثال زیر استفاده از متد effect() را با افکت های مختلف لیست شده در جدول بالا توضیح می دهد:

افکت – حرکت

jQuery UI effect Exampletitle></p> <p> script></p> <p> script></p> <p> #box-1 {</p> <p> height: 100px;</p> <p> width: 100px;</p> <p> background: #b9cd6d;</p> <p> }</p> <p> $(document).ready(function () {</p> <p> $(‘#box-1’).click(function () {</p> <p> $(“#box-1”).effect(“shake”, {</p> <p> times: 10,</p> <p> distance: 100</p> <p> }, ۳۰۰۰, function () {</p> <p> $(this).css(“background”, “#cccccc”);</p> <p> });</p> <p> });</p> <p> });</p> <p> script></p> <p>head></p> <div id="box-1">Click On Mediv></p> <p>body></p> <p>html></p> <p>افکت – انفجار</p> <p> <title>jQuery UI effect Exampletitle></p> <p> script></p> <p> script></p> <p> #box-2 {</p> <p> height: 100px;</p> <p> width: 100px;</p> <p> background: #b9cd6d;</p> <p> }</p> <p> style></p> <p> $(document).ready(function () {</p> <p> $(‘#box-2’).click(function () {</p> <p> $(“#box-2”).effect({</p> <p> effect: “explode”,</p> <p> easing: “easeInExpo”,</p> <p> pieces: 4,</p> <p> duration: 5000</p> <p> });</p> <p> });</p> <p> });</p> <p> script></p> <p>head></p> <div id="box-2">div></p> <p>body></p> <p>html></p> <div class="clear"></div> </div> <div class="post-tags"> <a href="https://help.regiran.com/tag/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%85%d8%aa%d8%af-effect-%d8%af%d8%b1-jqueryui/" rel="tag">آموزش متد Effect در JqueryUI</a> </div> </div> <div class="post-box-wrapper first"> <div class="post-box"> <h5>درباره نویسنده</h5> <img alt='' src='https://secure.gravatar.com/avatar/c15beff9753565d2c37ed75241a81fba?s=75&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/c15beff9753565d2c37ed75241a81fba?s=150&d=mm&r=g 2x' class='avatar avatar-75 photo' height='75' width='75' /> <p></p> </div> </div> <div class="post-box-wrapper"> <div class="post-box"> <h5>نوشته‌های مرتبط</h5> </div> </div> <div id="comments" class="post-box-wrapper"> <div class="post-box">   <div id="respond"> <h5>ارسال دیدگاه</h5> <p class="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%85%D8%AA%D8%AF-effect-%D8%AF%D8%B1-jqueryui-2/#respond" style="display:none;">برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک کنید.</a></p> <p>شما باید <a href="https://help.regiran.com/wp-login.php?redirect_to=https%3A%2F%2Fhelp.regiran.com%2F%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%2585%25d8%25aa%25d8%25af-effect-%25d8%25af%25d8%25b1-jqueryui-2%2F">وارد شوید</a> تا دیدگاهی ارسال کنید.</p> </div> </div> </div> </div> </div> <div id="secondary-sidebar-wrap" class="span-4 last"> <div class="sidebar-secondary"> <ul class="widget-wrap" style="list-style: none; padding: 0;"> <li class="widget" style="background: #fff; border: 1px solid #ccc; padding: 10px 12px; margin-bottom: 15px; border-radius: 6px;"> <a href="http://regiran.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b1%d8%aa%d8%a8%d9%87-%d8%af%d8%b1-%da%af%d9%88%da%af%d9%84.html" target="_blank" style="font-size: 15px; color: #0044cc; font-weight: bold; text-decoration: none;">دوست داری مثل ما بیای صفحه اول گوگل؟</a> <p style="margin: 6px 0 4px; font-size: 13px;">ما رتبه سایت تون رو میکشیم بالا</p> <p style="margin: 6px 0 4px; font-size: 13px;">سئوی حرفه ای رجیران</p> <p style="margin: 6px 0 4px; font-size: 13px;">مشاوره کاملا رایگان</p> <p style="margin: 0; font-weight: bold; color: #c00;">021-22251000</p> <p style="margin: 0; font-weight: bold; color: #c00;">09122459000</p> </li> <li class="widget" style="background: #fff; border: 1px solid #ccc; padding: 10px 12px; margin-bottom: 15px; border-radius: 6px;"> <a href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87.html" target="_blank" style="font-size: 15px; color: #0044cc; font-weight: bold; text-decoration: none;">هنوز سایت نداری؟</a> <p style="margin: 6px 0 4px; font-size: 13px;">الان وقتشه که کسب و کارت رو آنلاین کنی</p> <p style="margin: 6px 0 4px; font-size: 13px;">رجیران با چند سوال، سایتت رو راه میندازه</p> <p style="margin: 6px 0 4px; font-size: 13px;">مشاوره کاملا رایگان</p> <p style="margin: 0; font-weight: bold; color: #c00;">021-22251000</p> <p style="margin: 0; font-weight: bold; color: #c00;">09122459000</p> </li> <li class="widget" style="background: #fff; border: 1px solid #ccc; padding: 10px 12px; margin-bottom: 15px; border-radius: 6px;"> <a href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html" target="_blank" style="font-size: 15px; color: #0044cc; font-weight: bold; text-decoration: none;">طراحی سایت با رجیران</a> <p style="margin: 6px 0 4px; font-size: 13px;">با 25 سال سابقه</p> <p style="margin: 6px 0 4px; font-size: 13px;">بهترین کیفیت با مناسب ترین قیمت</p> <p style="margin: 6px 0 4px; font-size: 13px;">مشاوره کاملا رایگان</p> <p style="margin: 0; font-weight: bold; color: #c00;">021-22251000</p> <p style="margin: 0; font-weight: bold; color: #c00;">09122459000</p> </li> </ul> </div> </div> </div> <div class="clear"></div> <div id="footer-wrapper"> <div id="footer"> <div class="sitemap-container clearfix"> <ul class="sitemap clearfix"><li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">رجیران</h4><ul><li><a title="" class="core_button_normal" href="http://members.regiran.com/clientarea.php" id="button-ct-sitemap-domains-domregistration" target="_blank"> پورتال کاربران </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displayarticle&id=150" id="button-ct-sitemap-domains-domtransfer" target="_blank"> راهنمای پورتال</a></li><li> <a title="" class="core_button_normal" href="http://members.regiran.com/cart.php" id="button-ct-sitemap-domains-domapps0" target="_blank"> سفارش آنلاین </a></li><li><a title="" class="core_button_normal" href="http://help.regiran.com" id="button-ct-sitemap-domains-domapps" target="_blank"> آموزش وب رجیران </a></li><li> <a title="" class="core_button_normal" href="http://regiran.com/%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%D9%88-%D8%B4%D8%B1%D8%A7%DB%8C%D8%B7/" id="button-ct-sitemap-domains-domapps1" target="_blank"> قوانین و توافقنامه </a></li></ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">نمايندگی</h4><ul><li><a title="for business users" class="" href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-mywebsite-business" target="_blank"> نمایندگی ثبت دامنه </a></li><li><a title="for individual users" class="" href="http://regiran.com/%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b1%db%8c%d8%b3%d9%84%d8%b1%db%8c-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9/" id="button-ct-sitemap-mywebsite-personal" target="_blank"> نمايندگی هاست رجیران </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b1%db%8c%d8%b3%d9%84%d8%b1%db%8c-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9/" id="button-ct-sitemap-hosting-sitedesign" target="_blank"> نمايندگی اعتباری </a></li> </ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;"> سرورها</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b3%d8%b1%d9%88%d8%b1-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c/" id="button-ct-sitemap-hosting-linuxhosting" target="_blank"> سرورهای اختصاصی </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-hosting-windowshosting" target="_blank"> سرور مجازی لينوکس </a></li> <li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-hosting-windowshosting" target="_blank"> سرور مجازی ويندوز </a></li> </ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">طراحی سایت</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" id="button-ct-sitemap-mail-instantmail" target="_blank"> سايت ساز صفحه نگار </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c/" id="button-ct-sitemap-mail-mailxchange" target="_blank"> فروشگاه ساز صفحه نگار </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%86%d9%85%d9%88%d9%86%d9%87-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" id="button-ct-sitemap-mail-msexchange" target="_blank"> نمونه کارها </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b1%d8%aa%d8%a8%d9%87-%d8%af%d8%b1-%da%af%d9%88%da%af%d9%84/" id="button-ct-sitemap-mail-smartphoneapps" target="_blank"> افزایش رتبه در گوگل </a></li> <li><a title="" class="core_button_normal" href="http://www.regiran.com/Safhe_Negar.zip" id="button-ct-sitemap-mail-smartphoneapps" target="_blank"> دريافت کاتالوگ قبل از خريد </a></li> </ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">هاست</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-linux/" id="button-ct-sitemap-server-dedicated" target="_blank"> هاست لينوکس </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d9%87%d8%a7%d8%b3%d8%aa-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-windows/" id="button-ct-sitemap-server-virtual" target="_blank"> هاست ويندوز 2008 </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-server-dcs" target="_blank"> هاست اختصاصي </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displaycat&catid=5" id="button-ct-sitemap-server-smartphoneapps" target="_blank"> سوالات متداول </a></li></ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">ثبت دامنه</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-ecommerce-sharepoint" target="_blank"> تعرفه دامنه </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/cart.php?a=add&domain=register" id="button-ct-sitemap-ecommerce-eshops" target="_blank"> سفارش آنلاین دامنه </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%86%d8%a7%d9%85-%d8%af%d8%a7%d9%85%db%8c%d9%86-domain-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-ecommerce-listlocal" target="_blank"> نکاتی درباره انتخاب دامنه </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displaycat&catid=3" id="button-ct-sitemap-ecommerce-sem" target="_blank"> سوالات متداول </a></li> <li><a title="" class="core_button_normal" href="http://members.regiran.com/domainchecker.php" id="button-ct-sitemap-ecommerce-sem" target="_blank"> جستجوگر دامنه </a></li> </ul></li></ul> </div> </div> </div> <div id="bottom-wrapper"> <div id="bottom"> <span class="totop"><a href="#">Back to Top</a></span> <span class="left"><p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:44px;height:16px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:44px;height:16px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a> </p> </span> <span class="right"><div align="center"><font size="1" face="tahoma" color="#fff"> رجيران ® علامت تجاري ثبت شده است و هرگونه کپي برداري و ايجاد تشابه پيگرد قانوني دارد. 1391-1380© </font></div> <div align="center"><font size="1" face="tahoma" color="#fff"> Copyright © 2001 - 2012 REGIRAN ® All rights reserved. Portal System Powered by <a href="http://regiran.com"><font size="1px" face="tahoma" color="#fff">Safhe Negar ® v2.1 </a> </font></div> </div></span> </div> </div> <script type='text/javascript' src='https://help.regiran.com/wp-includes/js/wp-embed.min.js?ver=4.7.29'></script> </body> </html>