همراهان عزیز و وب مستران گرامی با اموزشهای ما که در زمینه طراحی وب سایت امیدوارم همراه بمانید و از ان استفاده لازم راببرید. در این بخش به آموزش متد Hide در Jquery UI میپردازیم

این فصل به متد hide() خواهد پرداخت که یکی از متدهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد effect() یک افکت انیمیشنی برای پنهان کردن عناصر به کار می برد.

ترکیب:

متد hide() دارای ترکیب زیر است:

hide( effect [, options ] [, duration ] [, complete ] )

Parameter

Description

effect

این پارامتر یک رشته است که نشان می دهد چه افکتی را برای تغییر استفاده کنیم.

options

این پارامتر از نوع Object است و تنظیمات خاص افکت و easing را نشان می دهد. علاوه بر این هر افکت دارای مجموعه گزینه های مربوطبه خود می باشد که می توانند به عنوان افکت مشترک بین چند افکت توصیف شده در جدول jQueryUI Effects تعیین شوند.

duration

این پارامتر از نوع Number یا String است و زمان افکت را به هزارم ثانیه نشان می دهد. مقدار پیش فرض آن ۴۰۰ است.

complete

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

افکت های jQueryUI

جدول زیر افکت های مختلفی را توصیف می کند که می توانند با متد hide() استفاده شوند.

Effect

Description

blind

عنصر را به روش پنجره ی کور پنهان کرده یا نمایش می دهد: با حرکت دادن لبه ی پایینی صفحه به بالا و پایین یا چپ و راست، بستگی به مسیر و سبک تعیین شده دارد.

bounce

باعث می شود عنثر در حالت پرش در راستای عمودی یا افقی، ظاهر شود، که به طور انتخابی عنصر را پنهان کرده و یا نمایش می دهد.

clip

با جابه جا کردن مرزهای متضاد عنصر با هم، تا اینکه در میانه به یکدیگر برسند، عنصر را نمایش می دهد یا آن را پنهان می کند.

drop

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

explode

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

fade

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

fold

با تنظیم مرزها به داخل و یا خارج، عنصر را نمایش داده و یا پنهان می کند، سپس همین کار را برای مجموعه ی دیگری از مرزها انجام می دهد.

highlight

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

puff

با تنظیم میزان کدری عنصر، آن را در جای خود باز کرده و یا می بندد.

pulsate

قبل از اینکه اطمینان حاصل کند که عنصر همانطور که تعیین شده، نمایش داده می شود یا پنهان می شود، میزان کدری عنصر را تنظیم می کند.

scale

عنصر را با یک درصد خاص باز کرده و یا می بندد.

shake

عنصر را به عقب و جلو ، افقی یا عمودی، حرکت می دهد.

size

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

slide

عنصر را طوری جابه جا می کند که به نظر می رسد روی صفحه یا خارج صفحه اسلاید شده است.

transfer

یک عنصر موقت اوت لاین را محرک سازی می کند که باعث می شود عنصر به عنصری دیگر منتقل شود. ظاهر عنصر اوت لاین باید از طریق قوانین CSS برای گروه ui-effects-transfer تعریف شود یا گروه به عنوان یک گزینه تعیین شود.

افکت – Blind

مثال زیر استفاده از متد hide() را با استفاده از افکت blind نشان می دهد. روی دکمه ی Blind Effect Hide کلیک کنید تا قبل از پنهان شدن عنصر، افکت blind را مشاهده کنید.

.toggler {

width: 500px;

height: 200px;

}

#button {

padding: .5em 1em;

text-decoration: none;

}

#effect {

width: 240px;

height: 135px;

padding: 0.4em;

position: relative;

}

#effect h3 {

margin: 0;

padding: 0.4em;

text-align: center;

}

$(function () {

function runEffect() {

$(“#effect”).hide(“blind”, { times: 10, distance: 100 }, 1000, callback);

};

// callback function to bring a hidden box back

function callback() {

setTimeout(function () {

$(“#effect”).removeAttr(“style”).hide().fadeIn();

}, ۱۰۰۰);

};

$(“#button”).click(function () {

runEffect();

return false;

});

});

Hide

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Blind Effect Hide

افکت – shake

مثال زیر استفاده از متد shake() را با افکت blind نشان می دهد. روی دکمه ی Shake Effect Hide کلیک کنید تا قبل از اینکه عنصر پنهان شود، افکت shake را مشاهده کنید:

.toggler-1 {

width: 500px;

height: 200px;

}

#button-1 {

padding: .5em 1em;

text-decoration: none;

}

#effect-1 {

width: 240px;

height: 135px;

padding: 0.4em;

position: relative;

}

#effect-1 h3 {

margin: 0;

padding: 0.4em;

text-align: center;

}

$(function () {

function runEffect() {

$(“#effect-1”).hide(“shake”, { times: 10, distance: 100 }, 1000, callback);

};

// callback function to bring a hidden box back

function callback() {

setTimeout(function () {

$(“#effect-1”).removeAttr(“style”).hide().fadeIn();

}, ۱۰۰۰);

};

// set effect from select menu value

$(“#button-1”).click(function () {

runEffect();

return false;

});

});

Hide

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Shake Effect Hide