جستجو برای:
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
    • جاوااسکریپت
    • Angular
    • Nodejs
    • Reactjs
    • Vuejs
    • Electronjs
    • دیتابیس MongoDB
    • کتابخانه های جاوا اسکریپت
    • فریمورک های جاوا اسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت
      • 1) جاوااسکریپت چیست ؟
      • 2) بارگذاری جاوااسکریپت
      • 3) کامنت گذاشتن در جاوااسکریپت
      • 4) متغیرها در جاوااسکریپت
      • 5) عملگرها در جاوااسکریپت
      • 6) انواع داده در جاوااسکریپت
      • 7) اعداد در جاوااسکریپت
      • 8) رشته ها در جاوااسکریپت
      • 9) متد های رشته در جاوااسکریپت
      • 10) آرایه ها در جاوااسکریپت
      • 11) متدهای آرایه در جاوااسکریپت
      • 12) مرتب سازی آرایه در جاوااسکریپت
      • 13) اشیا در جاوااسکریپت
      • 14) توابع در جاوااسکریپت
      • 15) توابع ریاضی در جاوااسکریپت
      • 16) دستور شرطی if در جاوااسکریپت
      • 17) دستور Switch در جاوااسکریپت
      • 18) آموزش حلقه for در جاوااسکریپت
      • 19) آموزش حلقه while
    • آموزش رایگان جی کوئری
      • 1) جی کوئری چیست ؟
      • 2) نصب جی کوئری
      • 3) سینتکس جی کوئری
      • 4) سلکتورها در جی کوئری
      • 5) رویداد ها در جی کوئری
      • 6) Hide و Show در جی کوئری
      • 7) افکت Fade در جی کوئری
      • 8) افکت Slide در جی کوئری
      • 9) انیمیشن در جی کوئری
      • 10) افکت ها در جی کوئری
      • 11) دسترسی به محتوای تگ ها (Get)
      • 12) ارسال اطلاعات به تگ ها (Set)
    • آموزش های کامل جاوااسکریپت
      • آموزش کامل Operators (عملگرها)
      • آموزش کامل حلقه ها و شرط ها
      • آموزش کامل Objects (اشیا)
      • آموزش کامل Arrays (آرایه ها)
      • آموزش کامل Functions (توایع)
  • دوره ها
    • دوره رایگان جاوااسکریپت
    • دوره رایگان عملگرها (Operators)
    • دوره رایگان شرط ها و حلقه ها
    • دوره رایگان اشیا (Objects)
    • دوره رایگان آرایه ها (Arrays)
    • دوره رایگان توابع (Functions)
    • دوره پروژه محور هیولای جاوااسکریپت
    • دوره رایگان React مقدماتی
    • دوره پروژه محور هیولای React
  • نقشه راه یادگیری جاوااسکریپت
 
MEGA JS
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
    • جاوااسکریپت
    • Angular
    • Nodejs
    • Reactjs
    • Vuejs
    • Electronjs
    • دیتابیس MongoDB
    • کتابخانه های جاوا اسکریپت
    • فریمورک های جاوا اسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت
      • 1) جاوااسکریپت چیست ؟
      • 2) بارگذاری جاوااسکریپت
      • 3) کامنت گذاشتن در جاوااسکریپت
      • 4) متغیرها در جاوااسکریپت
      • 5) عملگرها در جاوااسکریپت
      • 6) انواع داده در جاوااسکریپت
      • 7) اعداد در جاوااسکریپت
      • 8) رشته ها در جاوااسکریپت
      • 9) متد های رشته در جاوااسکریپت
      • 10) آرایه ها در جاوااسکریپت
      • 11) متدهای آرایه در جاوااسکریپت
      • 12) مرتب سازی آرایه در جاوااسکریپت
      • 13) اشیا در جاوااسکریپت
      • 14) توابع در جاوااسکریپت
      • 15) توابع ریاضی در جاوااسکریپت
      • 16) دستور شرطی if در جاوااسکریپت
      • 17) دستور Switch در جاوااسکریپت
      • 18) آموزش حلقه for در جاوااسکریپت
      • 19) آموزش حلقه while
    • آموزش رایگان جی کوئری
      • 1) جی کوئری چیست ؟
      • 2) نصب جی کوئری
      • 3) سینتکس جی کوئری
      • 4) سلکتورها در جی کوئری
      • 5) رویداد ها در جی کوئری
      • 6) Hide و Show در جی کوئری
      • 7) افکت Fade در جی کوئری
      • 8) افکت Slide در جی کوئری
      • 9) انیمیشن در جی کوئری
      • 10) افکت ها در جی کوئری
      • 11) دسترسی به محتوای تگ ها (Get)
      • 12) ارسال اطلاعات به تگ ها (Set)
    • آموزش های کامل جاوااسکریپت
      • آموزش کامل Operators (عملگرها)
      • آموزش کامل حلقه ها و شرط ها
      • آموزش کامل Objects (اشیا)
      • آموزش کامل Arrays (آرایه ها)
      • آموزش کامل Functions (توایع)
  • دوره ها
    • دوره رایگان جاوااسکریپت
    • دوره رایگان عملگرها (Operators)
    • دوره رایگان شرط ها و حلقه ها
    • دوره رایگان اشیا (Objects)
    • دوره رایگان آرایه ها (Arrays)
    • دوره رایگان توابع (Functions)
    • دوره پروژه محور هیولای جاوااسکریپت
    • دوره رایگان React مقدماتی
    • دوره پروژه محور هیولای React
  • نقشه راه یادگیری جاوااسکریپت
0
ورود / ثبت نام

8) افکت Slide در جی کوئری

16 تیر 1398
ارسال شده توسط محمدرضا حاجی مقصودی
یادگیری جی کوئری
3.88k بازدید

افکت Slide در جی کوئری

تونل یادگیری جی کوئری

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

افکت FADE در جی کوئری

این افکت از سه تابع اصلی تشکیل شده است که در ادامه باه هر سه تای این توابع آشنا میشویم:

۱) متد ()SLIDEDOWN

هنگامی که از این متد استفاده کنیم المان ما بصورت کرکره ای باز میشود و نمایش داده میشود. این افکت مانند دو افکت قبل دارای دو مقدار ورودی است که دقیقا ساختاری شبیه به هم دارند، به عنوان مثال:

$("#flip").click(function(){
$("#panel").slideDown();
});

۲) متد ()SLIDEUP

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

$("#flip").click(function(){
$("#panel").slideUp();
});

۳) متد ()SLIDETOGGLE

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

$("#flip").click(function(){
$("#panel").slideToggle();
});
اشتراک گذاری:
برچسب ها: تونل یادگیریجی کوئرییادگیری جی کوئری

مطالب زیر را حتما مطالعه کنید

ارسال اطلاعات به تگ ها در جی کوئری

12) ارسال اطلاعات به تگ ها با جی کوئری (Set)

دسترسی به محتوای html با جی کوئری

11) دسترسی به محتوای تگ ها با جی کوئری

افکت ها در جی کوئری

10) افکت ها در جی کوئری (تکمیلی)

انیمیشن در جی کوئری

9) انیمیشن در جی کوئری (Animation)

افکت Fade در جی کوئری

7) افکت Fade در جی کوئری

Hide و Show در جی کوئری

6) Hide و Show در جی کوئری

5 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • مهدی گفت:
    26 بهمن 1399 در 09:15

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

    برای پاسخ دادن وارد شوید
    • محمدرضا حاجی مقصودی گفت:
      26 بهمن 1399 در 12:55

      سلام و درود حتما ویدئو هم میذاریم

      برای پاسخ دادن وارد شوید
      • Fatemeh گفت:
        7 فروردین 1400 در 17:17

        تشکر ممنون میشم هر چه زود تر آموزش رو در اختیار بذارید

  • amir2651381 گفت:
    18 اسفند 1398 در 20:56

    سلام محمدرضا جان . چرا مطالب jQuery رو در قالب فیلم تهیه نمی کنین ؟ این مطلب خیلی مهمه و با خواندن نمیشه درست فهمیدشون . با تشکر

    برای پاسخ دادن وارد شوید
    • محمدرضا حاجی مقصودی گفت:
      18 اسفند 1398 در 23:42

      سلام دوست عزیز.
      حتما در برنامه دارم اما در اولویت فعلی نیست.

      برای پاسخ دادن وارد شوید

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

جستجو برای:
هیولای جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

دسته‌ها
  • Angular
  • Denojs
  • Electronjs
  • Mongo DB
  • Nodejs
  • React
  • Vue
  • ابزار و تکنولوژی
  • جاوااسکریپت
  • فریم ورک ها
  • کتابخانه ها
  • وبلاگ
  • یادگیری React
  • یادگیری جاوااسکریپت
  • یادگیری جی کوئری
جاوااسکریپت را از کجا شروع کنیم؟

نقشه راه یادگیری جاوا اسکریپت

MEGAJS | مگا جی اس

جدیدترین نوشته ها
  • ۲6) تمرین عملگرها: جا به جایی متغیرها با جاوااسکریپت
  • Typescript چیست؟ چرا باید ازش استفاده کنیم؟
  • ۲۵) آموزش اولویت عملگرها در جاوااسکریپت
  • ۲۴) آموزش عملگرهای منطقی در جاوااسکریپت
درباره MEGA JS، دنیای جذاب جاوااسکریپت

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

دوره های رایگان مگا جی اس

دوره رایگان آموزش جاوااسکریپت
دوره رایگان آموزش ری اکت

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

دوره های هیولای مگا جی اس

دوره ۲۰روش درآمدی هیولای درامدزایی
دوره پروژه محور هیولای جاوا اسکریپت
دوره پروژه محور هیولای ری اکت

فیلم های آموزشی رایگان در

کانال آپارات MEGAJS   کانال آپارات MEGAJS

کانال یوتوب MEGAJS   

تمامی حقوق برای سایت MEGA JS محفوظ می باشد.
ورود به سایت ×
رمز عبور خود را فراموش کرده اید؟
ورود با رمز یکبار مصرف
ارسال کد یکبار مصرف(00:120)
حساب کاربری ندارید؟
ثبت نام
ارسال کد یکبار مصرف(00:120)
بازگشت به ورود

ارسال کد یکبار مصرف (00:120)
بازگشت به ورود
  • (+93) افغانستان
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) ایران
  • (+964) عراق
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) پاکستان
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) ترکیه
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) ایلات متحده عربی
  • (+44) پادشاهی متحد بریتانیا
  • (+1) ایالات متحده آمریکا
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت