ساخت انیمیشن با jQuery

مهر ۱۴, ۱۳۹۱ توسط : رضا فرهادیان

تا حالا شده که این نیاز رو احساس کنید که سایتتون احتیاج به پویانمایی داشته باشه؟خوب معمولا اگر قرار باشه در سایتتون از انیمیشنی استفاده کنید، ساده ترین روش یعنی استفاده از CSS3 رو انتخاب میکنید.اما یک راهه دیگه که شاید با دیدنش تعجب زده بشیند و بگید “من نمیتونم!” وجود داره،در واقع در هم بودن کدهای این شیوه باعث شده کمتر کسی از jQuery برای پویا کردن سایت خودش استفاده کنه.در این پست نمونه ای از پویانمایی رو در jQuery براتون قرار دادم.

برای شروع کار شما احتیاج به فراخوانی فایل jQuery.js(نسخه آخر) دارید،که میتوانید از این لینک دریافت کنید، و برای فراخوندن اون باید از دستور زیر استفاده کنید:


<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 </head>

بین تگ <script> و <script/> کدهای jQuery قرار میگرن.

مهمترین قسمت کار ما،کد زیر هست:


$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
$("#flip").slideUp("slow");
});
});

که همونطور که گفتم بین تگ اسکریپت قرار میگیره،اتفاقی که بالا میوفته اینه که شما با کلیک بروی flip(از اجزای کد css) رویدادهای زیرین رو درخواست میکنین.خط سوم،همونطور که مشاهده میکنید از دستور slideDown استفاده کرده،با استفاده از این دستور،شما panel رو نمایان میکنید و خط پایین هم،flip یا همون جزئی که روش کلیک شده رو به سمت بالا یعنی ناپدید شدن میبره.قبل از slideup و sliddown باید نام شیءِ CSS رو بیارید،مقدار این دو تابع هم همونطور که مشخصه کاملا قابل تنظیم هست،یه جور همکاریه مشترک بین jQ و CSS3 :).حالا ما باید برای اشیاء تعریف شده دستورات CSS رو به عمل بیاریم،مثلا:

<style type="text/css">
body
{
font-family:tahoma;
font-size:8pt;
color:#787878;
text-align:right;
}

#panel,#flip,table
{
width:320px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
font-family: tahoma;
border-radius:3px;
}
#panel
{
display:none;
}
</style>

حالا ما در اینجا قصد داریم تا یک جدول قیمت پویا طراحی کنیم(نگاهی به آموزش W3SCHOOLS درباره ی TABLE داشته باشید : لینک)پس عنوان جدولمون (برای مثال:”برای مشاهده لیست قیمت ها،کلیک کنید”) در div مربوط به flip که قرار با بالا اومدن panel محو بشه،قرار میدیم.سپس جدولمون رو در div مربوط به panel قرار میدیم،کد body:

<b><div id="flip">برای مشاهده لیست قیمت ها،کلیک کنید</div></b>
<div id="panel"><table border="22">
<th>قیمت</th>
<th>نام</th>
<tr></tr>
<td>یکصد هزارتومان</td>
<td>طراحی</td>
<tr></tr>
<td>دویست هزارتومان</td>
<td>برنامه نویسی</td>
</tr>
</table></div>

خوب الان مدل پویا ما کامل شد!

امیدوارم اولین مطلب من در PHPRO.IR مورد پسندتون واقع شده باشه…

بازدید : ۸۸۳۰

سعید
مهر ۱۴, ۱۳۹۱ @ ۱۰:۵۱ ق.ظ

مرسی آقا رضا
خیلی خوبه.

پاسخ دادن
erfan
مهر ۱۴, ۱۳۹۱ @ ۱۱:۱۷ ق.ظ

سلام.
خوب بود ممنون.
ولی تو یه قسمت یه مورد کوچیک وجود داره که اگه لطف کنید اصلاح کنید خیلی بهتره چون افراد مبتدی با مشکل مواجه میشن.
تو قسمت html
برای مشاهده لیست قیمت ها،کلیک کنید
این خط

یه دابل کوتیشن جا افتاده.
ممنون

پاسخ دادن
    رضا
    مهر ۱۴, ۱۳۹۱ @ ۱:۲۳ ب.ظ

    سلام.
    بله بله!
    ممنون.

    پاسخ دادن
erfan
مهر ۱۴, ۱۳۹۱ @ ۱۱:۱۸ ق.ظ

😐
انگار html رو بتو کامنت اجرا میکنه.
منظورم اینه

پاسخ دادن
ایوب سیستم
مهر ۱۵, ۱۳۹۱ @ ۳:۱۷ ب.ظ

خیلی خوب بود. مممنون ♥

پاسخ دادن
arc
مهر ۲۸, ۱۳۹۱ @ ۱:۵۶ ق.ظ

in chie baba khejalat dare baba
mobtadiiiiiiiiiiiiiiii

پاسخ دادن
    مهر ۲۸, ۱۳۹۱ @ ۲:۲۱ ق.ظ

    شما که استادی از کدهای خیلی پیشرفته استفاده کن،باشه گُلم ؟

    پاسخ دادن
    سعید
    مهر ۲۸, ۱۳۹۱ @ ۱۰:۳۰ ق.ظ

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

    پاسخ دادن
arc
مهر ۲۸, ۱۳۹۱ @ ۲:۲۴ ق.ظ

عزیزم چشاتو وا کن یکم سرچ کن چیزای بهترم پیدا میکنی!
چرت و پرت نده بیرون فقط واسه اینکه ۲و۳ نفر زیرش comment بدن!

پاسخ دادن
    سعید
    مهر ۲۸, ۱۳۹۱ @ ۱۰:۳۸ ق.ظ

    آقا رضا داره ذکات علمش رو میده و برای این نیست که ۲ ۳ نفر براش کامنت بدن.
    در ضمن شما اگه خیلی حرفه ای بودی اینجوری حرف نمیزدی.

    پاسخ دادن
      arc
      مهر ۲۸, ۱۳۹۱ @ ۱:۲۲ ب.ظ

      نه بابا کی میگه من حرفهاییمممممممممممممممممممممم!!!!!!!!!!!!!!!!!!!

      پاسخ دادن
    مهر ۲۸, ۱۳۹۱ @ ۱۲:۳۴ ب.ظ

    {کامنتت حذف شد رضا}
    —————————-
    سعید

    پاسخ دادن
      arc
      مهر ۲۸, ۱۳۹۱ @ ۱:۲۲ ب.ظ

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

      پاسخ دادن
        سعید
        مهر ۲۸, ۱۳۹۱ @ ۱:۴۵ ب.ظ

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

        پاسخ دادن
جواد
آبان ۲۳, ۱۳۹۱ @ ۴:۳۹ ب.ظ

دوست عزیز میشه بگی کدها رو چطور چیدمان کردی که کنار صفحه یصورت شماره گذاری ردیف شده ؟؟؟

منظورم به این شکله…

۱|
۲|
۳|
۴|
۵|

دستورش رو لطف میکنی….

پاسخ دادن
    سعید
    آبان ۲۴, ۱۳۹۱ @ ۱۲:۳۹ ق.ظ

    از پلاگین syntaxhighlighter استفاده کنید.

    پاسخ دادن
محمد
آذر ۲۰, ۱۳۹۱ @ ۸:۵۷ ق.ظ

سلام

از مطلبتون استفاده کردم. و واقعا جالب بود.
فقط به نظرم اگر در ابتدا یا انتهای کار دموی آن را نشان بدهید خیلی بهتر خواهد شد. ( من برای دیدن نتیجه کار مجبور شدم چند دقیقه وقت بگذارم و اونها را در یک فایل جمع آوری کنم تا نتیجه را ببینم. ولی ارزش وقت گذاشتن را داشت !)

پاسخ دادن
  • Pingback: ساخت انیمیشن با jQuery | وبلاگ گروه وب نگار

  • دی ۲۶, ۱۳۹۱ @ ۱۲:۵۲ ب.ظ

    تشکر. سایت شما را به خاطر آموزش های خوبتون لینک کردم به بلاگم.
    یا علی

    پاسخ دادن
      سعید
      دی ۲۶, ۱۳۹۱ @ ۵:۰۳ ب.ظ

      ممنون موفق باشید

      پاسخ دادن
      دی ۲۶, ۱۳۹۱ @ ۵:۴۴ ب.ظ

      سلام، خواهش میکنم.
      خوشحالم که مطلبی که نوشتم بدردتون خورده.

      پاسخ دادن
    اردیبهشت ۹, ۱۳۹۲ @ ۱:۰۳ ق.ظ

    سلام ممنون بابت تمام مطلب های خوبتون
    ولی بهتر نیست که به جای نوشتم کد ها به صورت عادی یه syntax highlighter داشته باشین تا کد ها زیبا تر و خوانا تر به نظر برسن؟
    شما کل متن داخل هر پستت رو rtl کردی که کد ها هم rtl شدند و خوانایی خودشون رو از دست دادن!
    حیف نیست سایت به این خوبی دارین و این یه قلم جنس رو نذارین؟

    ممنون 🙂

    پاسخ دادن
      سعید
      اردیبهشت ۹, ۱۳۹۲ @ ۱۱:۳۲ ق.ظ

      ممنون دوست عزیز
      syntax highlighter نصبه و کدها درست نمایش داده میشن احتمالا برای شما به صورت کامل لود نمیشن
      موفق باشید

      پاسخ دادن
    علی
    تیر ۴, ۱۳۹۵ @ ۴:۲۳ ب.ظ

    خیلی عالی بود ولی فقط جدول رو باز می کنه برای بسته شدن از کد زیر استفاده کنید.
    ایجاد دکمه:
    toggel button
    وکد جی کئوری:
    $(“#taggle”).click(function(){
    $(“#panel”).slideToggle(1500);
    $(“#flip”).slideToggle(“slow”);
    });
    تمام شد.

    پاسخ دادن

    پاسخ دهید

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


    *