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

          admin 
            بازدید : 136
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) slideToggle در jQuery

در این بخش از آموزش jquery ، افکت SlideToggle را در طراحی سایت آموزش می دهیم.

افکت slideToggle همانند یک عملگر دوجانبه بین دو افکت slideUp و افکت slideDown بر روی عنصر مورد اثر خود عمل می کند .
به عبارت دیگر افکت slideToggle ابتدا وصغیت نمایش و یا عدم نمایش عنصر را بررسی کرده و در صورتی که آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود . و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد .
افکت slideToggle کاربرد بسیار سودمندی می تواند داشته باشد . به وسیله آن می توانید این اختیار را به کاربر بدهید تا عناصری را که می خواهد در صفحه مخفی کرده و یا آنها را نمایان سازد .

کار افکت slideToggle این است که حلقه وار افکت میدهد .

شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).slideToggle ( speed , callback )

selector :selector عنصری است که این افکت باعث مخفی و یا نمایان شدن آن می شود .

speed :این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی و یا نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی یا نمایان شود را نعیین می کنید . مثلا 100 ms .
تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی یا نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
"slow"
"normal"
"fast"

callback :توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربردافکت slideToggle را نشان میدهد:

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

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 150
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) stop در jQuery

در این بخش از آموزش jquery ، افکت stop را در طراحی سایت آموزش می دهیم.

به کار بردن افکت stop باعث توقف انجام یک عمل یا انیمیشن برای عنصر مورد نظر می شود . برای مثال فرض کنید که یک تگ Div دارید که می خواهید ارتفاع آن را از 100 به 500 پیکسل افزایش دهید . انجام این کار چند ثانیه طول می کشد . می توانید دکمه فرمانی قرار دهید تا با اجرای افکت stop انجام انیمیشن فوق را برای تگ Div ، مثلا در وسط فرایند متوقف سازد .
شکل کلی استفاده از این افکت بصورت زیر است :

$( selector ).stop( stopAll , goToEnd ) ;

selector : selector تعیین کننده id عنصری است که می خواهیم اجرای یک افکت بر روی آن با متد ( ) stop متوقف شود .

stopAll : این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود، در هنگام اجرای افکت stop ، کلیه انیمیشن های مرتبط با این افکت را به صورت یکباره متوقف می سازد .
استفاده از این پارامتر اختیاری است .
goToEnd : این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود ، در هنگام اجرای افکت stop ،انیمیشن های مرتبط با آن را به یکباره متوقف کرده و به مرحله آخر می رساند .
استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد افکت stop را نشان میدهد:

$("#stop").click(function(){
$("div").stop();
});

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 164
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) delay در jQuery

در این بخش از آموزش jquery ، افکت delay را در طراحی سایت آموزش می دهیم.

افکت delay باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود .

برای مثال فرض کنید که یک افکت ( ) fadeIn را برای یک عنصر تعیین کرده اید . این افکت در هنگام کلیک کاربر بر روی دکمه فرمان اجرا می شود . اما می خواهید کاری کنید تا مثلا 3 ثانیه بعد از کلیک کاربر بر روی دکمه فرمان ، افکت ( ) fadeIn اجرا شود . برای این منظور بایستی ازافکت delay به همراه آن استفاده کنید .
شکل کلی استفاده ازاین افکت بصورت زیر است :

Syntax $( selector ).delay( speed ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم در اجرای یک افکت بر روی آن ، تاخیر ایجاد نماییم .

speed : این پاراتر تعیین کننده مدت زمان تاخیر در اجرای افکت است .
انواع مقادیر ممکن عبارتند از :
MiliSecond : مدت زمان تاخیر در اجرای افکت بر حسب میلی ثانیه .
Slow : سرعت آهسته .
Fast : سرعت زیاد .
مثال زیر کاربرد افکت delay را نشان میدهد .

$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});

در خط 1 با کلیک روی محتوای تگ button تابع اجرا شود

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 154
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) slideUp در jQuery

در این بخش از آموزش jquery ، افکت SlideUp را در طراحی سایت آموزش می دهیم.

افکت slideUp با کاهش تدریجی ارتفاع یک عنصر باعث مخفی شدن آن می شود . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد .

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

شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).slideUp ( speed , callback )

selector : selector عنصری است که این افکت باعث مخفی شدن آن می شود .

speed : این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا 100 ms .
تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
"slow"
"normal"
"fast"

callback : توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است .

مثال زیر کاربرد افکت slideUp را نشان میدهد:

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

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 133
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) animate در jQuery

در این بخش از آموزش jquery ، افکت animate را در طراحی سایت آموزش می دهیم.

افکت animate بوسیله تغییر یک یا چند خاصیت CSS عنصر مورد نظر از یک حالت اولیه به مقداری جدید یک عمل انیمیشن را انجام می دهد . مقدار خاصیت یا خاصیت های CSS تعیین شده برای تغییر در عنصر مورد نظر توسط یک افکت ( ) animate بصورت آهسته از مقدار اولیه به مقدار ثانویه تغییر می کنند که باعث ایجاد یک حالت انیمیشن می شود .
فرض کنید یک تگ div به رنگ پس زمینه سبز دارید . مقدار خاصیت height ( ارتفاع ) آن در حالت اولیه px 100 است . می خواهید بوسیله خاصیت ( ) animate مقدار ارتفاع آن را به px 300 افزایش دهید . در هنگام اجرای ( ) animate ارتفاع عنصر به صورت آهسته از 100 به 300 افزایش می یابد و باعث ایجاد یک افکت تصویری می شود .
افکت ( ) animate فقط با خواص CSS ای که مقادیر آنها عددی است مثل (Height : 30 px ) کار می کند و نمی تواند آن را با خواصی که مقدار رشته ای دارند مثل ( background-color:red ) به کار ببرید .

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

( selector ).animate ( {styles} , speed , easing , callback ) ;

مثال زیر کاربردافکت animate را نشان میدهد:

$("button").click(function(){
$("div").animate({left:'250px'});
});

هرگاه روی دکمه ای از نوع button کلیک کردیم جلوه انیمیشن روی محتویات تگ div انجام شود و ...

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 118
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) slideDown در jQuery

در این بخش از آموزش jquery ، افکت SlideDown را در طراحی سایت آموزش می دهیم.

افکت slideDown با افزایش تدریجی ارتفاع یک عنصر مخفی ، آن را از حالت مخفی به حالت نمایان در می آورد . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد . بدیهی است این افکت بر روی عنصری موثر است که در ابتدا مخفی باشد .
افکت slideDown بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها درcss برابر با none باشد ، اثر خواهد داشت .

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

شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).slideDown ( speed , callback )

مثال زیر کاربرد افکت slideDown را نشان میدهد:

$("#pars-soft.ir").click(function(){
$("#panel").slideDown();
});

هر وقت روی محتویات تگی که از ای دی به نام pars-soft.ir استفاده می کند کلیک شود محتویات تگی که از ای دی panel استفاده می کند بصورت اسلایدی نمایش داده شود .

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 101
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) show در jQuery

در این بخش از آموزش jquery ، افکت show را در طراحی سایت آموزش می دهیم.

افکت show عنصری که مخفی است را نمایان می کند . عملکرد این افکت همانند افکت fadeIn می باشد . بدیهی است عنصری که با این افکت نمایان می شود باید در ابتدا مخفی باشد .
افکت show بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها در css برابر با none باشد ، اثر خواهد داشت .
شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).show ( speed , callback )

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 152
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) hide در jQuery

در این بخش از آموزش jquery ، افکت hide را در طراحی سایت آموزش می دهیم.

افکت ( ) hide باعث مخفی شدن عنصر مورد نظر می شود . عمکلرد این افکت بسیار شبیه به افکت fadeOut می باشد . بوسیله افکت ( ) hide می توانید این اختیار را به کاربر بدهید تا عناصری را که در صفحه لازم ندارد ، مخفی کند .
شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).hide ( speed , callback )

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 127
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) fadeTo در jQuery

در این بخش از آموزش jquery ، افکت fadeTo را در طراحی سایت آموزش می دهیم.

افکت fadeTo میزان شفافیت و وضوح نمایش یک عنصر را به تدریج به یک مقدار تعیین شده از سوی کاربر تغییر می دهد .
به عبارت دیگر افکت fadeTo میزان نور نمایش یک عنصر را کم یا زیاد می کند . شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).fadeTo ( speed , opacity , callback )

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

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

          admin 
            بازدید : 142
          پنجشنبه 29 خرداد 1393
           نظرات (0)
        

افکت ( ) fadeOut در jQuery

در این بخش از آموزش jquery ، افکت fadeOut را در طراحی سایت آموزش می دهیم.

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

شکل کلی استفاده از این متد به شرح زیر است :

$ ( " selector " ).fadeOut ( speed , callback )

درباره آموزش طراحی وب , جی کوئری ,

ادامه مطلب ...

صفحه قبل 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ...92 93 صفحه بعد

تعداد صفحات : 93