آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Color Animation در Jquery UI

دوره های مرتبط با این مقاله

JqueryUI - Color Animation

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() را توضیح می دهد:


< !DOCTYPE html>

< html>
< head>
                        < meta charset="utf-8">

                        < title>jQuery UI addClass Exampletitle>
                        < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

                        < script src="http://code.jquery.com/jquery-1.10.2.js">
script>

    < script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">script>

    < style>

        .elemClass {

                                width: 200px;

                                height: 50px;

            background-color: #b9cd6d;

        }

                            .myClass {

                                font-size: 40px;

                                background-color: #ccc;

                                color: white;

                            }

                            style>

                            < script type="text/javascript">

                                $(document).ready(function () {

                                    $('#button-1').click(function () {

                                        $('#animTarget').animate({

                                            backgroundColor: "black",

                                            color: "white"

                                        });

                                    });

                                });

                            script>

                        head>

                        < body>

                            < div id=animTarget class="elemClass">

                                Hello!

                            div>

                            < button id="button-1">Click Mebutton>

                        body>

                        html>

روی دکمه ی click me کلیک کنید و شاهد تغییرات انیمیشن باکس باشید.

  • 1368
  •    800
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .