آموزش جی کوئری در پانزده روز : روز سوم

چهارشنبه, ۲۳ام دی , ۱۳۸۸ | ۲۱ دیدگاه

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

امروز چه کار خواهیم کرد :

۱٫ انیمیشین جعبه به صورت تفکیک حرکات

۲٫ انیمیشن جعبه به صورت حرکات توأم

انیمیشین جعبه به صورت تفکیک حرکات :

خب برای شروع بد نیست کمی مطالب کلی جلسات پیش رو مرور کنیم. ما در فایل ایندکس سه قسمت مهم داریم:

۱٫ قسمت  CSS : ( کدهای سی اس اس بین این تگ قرار می گیریند )

<p align="right"><style type="text/css"></p>
<p align="right"></style></p>

۲٫ قسمت JavaScript : ( کدهای جی کوئری بین این تگ قرار می گیرند )

<script type="text/javascript">
</script>

۳٫ قسمت Body : ( کدهای اچ تی ام ال اصلی بین این تگ قرار می گیرند )

<body>
</body>

برای شروع جعبه ای به رنگ مشکی با عرض و ارتفاع ۳۲۰ پیکسل میسازیم. برای این کار یک تگ دیو در قسمت body میسازیم. البته فراموش نکنید که برای این دیو احتیاج به ID داریم که اسم اون رو Box می گذاریم :

<body>
<div id="box"></div>
</body>

برای شکل و شمایل این جعبه هم نیاز به کد CSS داریم :

<style type="text/css">

#box {
	height: 320px;
	width: 320px;
	background-color: black;
      position: relative;
}
</style>

تا اینجا ما یک جعبۀ مشکی داریم. برای به حرکت دراوردن اون احتیاج به کدها جی کوئری داریم. پس میریم که جعبه رو یکم تکونش بدیم. من ابتدا کل کد رو می نویسم و بعد دونه دونه کد ها رو توضیح خواهم داد :

<script type="text/javascript">

        $(function() {

            $('#box').click(function() {
                $(this).animate({"left" : "300px" }, 2000);
                $(this).animate({ "width" : "32px" }, 2000);
    $(this).animate({ "height" : "32px" }, 2000);
    $(this).animate({ "left": "0px" }, 2000);
            });

        });

    </script>

توضیحات :
خب طبق معمول با کد فانکشن شروع می کنیم و با کد click می گوییم که هر وقت روی #box کلیک کردم عملیات انجام بشه :

        $(function() {
            $('#box').click(function() {
            });
        });

حالا می خوایم جعبه رو در زمان ۲ ثانیه به اندازۀ ۳۰۰ پیکسل بفرستیم سمت راست. دقت کنید کلمۀ this اشاره داره به همون #box و برای راحتی ما دیگه نمی نویسیم #box و از this استفاده می کنیم. اگر شما جای this بنویسید #box هیچ فرقی نمی کنه. دقت کنید که اینجا ما می خواهیم از سمت چپ به راست حرکت کند. و چون از سمت چپ شروع می کنیم از left استفاده می کنیم.

$(this).animate({"left" : "300px" }, 2000);

بعد از این حرکت می خوایم عرض جعبه کوچیک بشه و از ۳۲۰ پیکسل به ۳۲ پیکسل برسه ! خب دقیقاً مثل کد قبل فقط به جای left از width استفاده می کنیم. به همین سادگی.

$(this).animate({ "width" : "32px" }, 2000);

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

$(this).animate({ "height" : "32px" }, 2000);

حالا می خوایم این جعبۀ کوچیک برگرده سر جای اولش !

$(this).animate({ "left": "0px" }, 2000);

نکته :
دوستان دقت کنید که موقعیت جعبه رو در سی اس اس relative تعریف کردیم. برای همین مختصات جعبه رو نصبت به جایی که بودتعریف کنیم. وگر نه باید مثلاً برای بگشتن به نقطۀ ابتدایی از -۳۰۰px استفاده می کردیم. اگر می خواهید تفاوت relative و fixed و absolute و static را بفهمید حتماً به این مثال ها نگاهی بیاندازید.

انیمیشن جعبه به صورت حرکات توأم :
برای اینکه تمام این حرکات با هم انجام شود. کافیست آنها را در یک خط بنویسم و با یک ویرگول اندازه ها رو از هم جدا کنیم. برای بهتر نشون دادن این کد من کمی اعداد رو انگولک کردم ! پیشنهاد می کنم شما هم بعد از دانلود کد ها اعداد رو انگولک کنید و اگر نتیجۀ عجیب غریب گرفتین برای ما هم بفرستینش. خب من کد رو به این صورت تغییر دادم کافیه چهار کدی که در بالا توضیح دادم پاک کنید و این کد را جایگزین کنید :

$(this).animate({ "left": "600px", "width": "32px", "height": "32px" }, 2000);

حالا همۀ حرکات توأم انجام میشه.
خب فکر می کنم خوب فهمیدید که چطور می تونید با استفاده جی کوئری اجزای صفحه تون رو تکون بدید. فرض کنید چند دکمه بالای صفحۀ سایتتون گذاشتید و با کلیک روی اونها تکه هایی در صفحه رفت و آمد می کنن ! جلسۀ بعد کمی از انیمیشن فاصله میگیریم و به کاربرد های جالب دیگری از جی کوئری می پردازیم.

پستهای مرتبط :

آموزش جی کوئری در پانزده روز : روز دوم

آموزش جی کوئری در پانزده روز : روز اول

مقدمه ای بر آموزش jQuery در ۱۵ روز

Be Sociable, Share!


۲۱ دیدگاه


  1. امین
    ۲۳ دی ۱۳۸۸

    ممنون. من یکی از طرفداران این قسمتم.




  2. مسیح
    ۲۳ دی ۱۳۸۸

    خواهش می کنم امید جان. این کامنت ها واقعاً خستگی آدم رو در می کنه ! مخصوصاً الان که وسط امتحاناس.




  3. سعید
    ۲۴ دی ۱۳۸۸

    مسیح جان کارت عالیه
    همین جوری با انرژی ادامه بده
    موفق باشی




  4. محمد
    ۲۴ دی ۱۳۸۸

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




  5. مجتبي عابدي پور
    ۲۴ دی ۱۳۸۸

    عالیه
    موفق باشید




  6. Mort3ZA
    ۲۴ دی ۱۳۸۸

    آخ جون قسمت سوم!!




  7. مسیح
    ۲۴ دی ۱۳۸۸

    # سعید جان از جلسۀ بعد یه مقدار افکت کم میشه ! ممکنه دیگه حال نکنی :دی

    # محمد آقا اتفاقاً انقدر ایده به ذهنم رسیده از جی کوئری که حد نداره … این سری آموزش ها که تموم بشه. کلی افکت کوتاه و آسون برای قشنگ تر کردن وب سایت میزارم.

    # ممنون آقا مجتبی . فکر کنم بعد از امتحانای سنگینم بتونم هر هفته دو جلسه آموزش بزارم. البته باید با آقا کامران هماهنگ بشه …

    # آخ جون سایت ! آقا مرتضی خیلی خوشحال شدم که سایت زدی. نگران ویزیتورت هم نباش به مرور اگر کیفیت مطالب و سایتت رو بالا ببری. همه لینکت می کنن… فقط صبور باش و ادامه بده …

    به امید روزی که هر ایرانی یک سایت داشته باشه.




  8. سهیل
    ۱ بهمن ۱۳۸۸

    آقا خسته نباشید
    خیلی عالیه




  9. عاطفه
    ۵ بهمن ۱۳۸۸

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



  10. […] آموزش جی کوئری در پانزده روز : روز سوم […]




  11. مهسا
    ۲۱ بهمن ۱۳۸۸

    بله میشه!




  12. مجتبی
    ۲۲ بهمن ۱۳۸۸

    ممنون

    منم عیبن خودتم

    خواستی کمک خبر کن

    تبادل لینک هم خواستی میکنیم

    http://www.mye.ir




  13. msaoud
    ۲۶ بهمن ۱۳۸۸

    دمت گرم



  14. […] آموزش جی کوئری در پانزده روز : روز سوم […]



  15. […] آموزش جی کوئری در پانزده روز : روز چهارم […]




  16. محمد
    ۳۰ آبان ۱۳۸۹

    با سلام
    مسیح جان خسته نباشی
    امیدوارم با انرژی ادامه بدی و امید دارم که تو تمام مراحل زندگیت موفق و سر حال باشی




  17. رضا
    ۱۸ دی ۱۳۸۹

    با سلام
    آقا خدا قوت, آقا خدا خیرت بده خیلی ساده و راحت بود




  18. Navid
    ۱۹ خرداد ۱۳۹۰

    Masih Jan, vase taghire range jabe dar har dafe ke animatemishe man az code:
    $(‘#box’).css(‘color’ , ‘yellow’);
    estefade mikonam valy javab nemide. Mamnoon misham komak koni.

    Thanks




  19. فریدون
    ۳ مرداد ۱۳۹۰

    عالی بود !!
    حوصله نداشتم کامنت بزارم ولی با این آموزش خوبی که گذاشتی مجبور شدم یه کامنت بزارم 🙂




  20. علی فلاح
    ۵ مهر ۱۳۹۰

    @مسیح واقعا ممنونم داداش ، آموزشت فوق العاده هست 🙂
    @Navid عزیز از کد زیر میشه استفاده کرد ولی تو همه انیمیشن ها ثابت میشه :
    $(this).css(‘background-color’,’yellow’);
    البته شاید آقا مسیح راه دیگه ای بدونه و یه چیز جدیدی یاد بگیریم 🙂




  21. HappyMoon
    ۹ اسفند ۱۳۹۰

    دستتون درد نکنه. خیلی جالب بود. برم سراغ جلسه‌ی بعد. مرسی.



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