دوستان گرامی سلام امیدوارم که روز خوبی را پست سر گذاشته باشین و با اموزش امروز ماهمراه بمانید .درمورد 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() را توضیح می دهد:

jQuery UI addClass Exampletitle></p> <p> script></p> <p> script></p> <p> .elemClass {</p> <p> width: 200px;</p> <p> height: 50px;</p> <p> background-color: #b9cd6d;</p> <p> }</p> <p> .myClass {</p> <p> font-size: 40px;</p> <p> background-color: #ccc;</p> <p> color: white;</p> <p> }</p> <p> style></p> <p> $(document).ready(function () {</p> <p> $(‘#button-1’).click(function () {</p> <p> $(‘#animTarget’).animate({</p> <p> backgroundColor: “black”,</p> <p> color: “white”</p> <p> });</p> <p> });</p> <p> });</p> <p> script></p> <p>head></p> <div id="animTarget" class="elemClass"> <p> Hello!</p> <p> div></p> <p> <button id="button-1">Click Mebutton></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-color-animation-%d8%af%d8%b1-jquery-ui/" rel="tag">آموزش Color Animation در Jquery UI</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 id="comments" class="post-box-wrapper"> <div class="post-box"> <!-- You can start editing here. --> <!-- If comments are open, but there are no comments. --> <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-color-animation-%d8%af%d8%b1-jquery-ui/#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-color-animation-%25d8%25af%25d8%25b1-jquery-ui%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="https://regiran.com/%d8%ae%d8%af%d9%85%d8%a7%d8%aa-%d8%b3%d8%a6%d9%88-%d9%88-%d8%a8%d9%87%db%8c%d9%86%d9%87%d8%b3%d8%a7%d8%b2%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b1%d8%aa/" 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="https://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87-%d8%ae%d8%b1%db%8c%d8%af-%d9%88-%d8%a7%d9%86%d8%aa%d9%82%d8%a7%d9%84-%d8%af%d8%a7%d9%85%d9%86%d9%87-%d8%a8%d8%a7-%d8%a8%d9%87%d8%aa%d8%b1%db%8c/" 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="https://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%ad%d8%b1%d9%81%d9%87%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d9%81%d8%a7%d8%b1/" 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>