You are on page 1of 15

Խ․ԱԲՈՎՅԱՆԻ ԱՆՎԱՆ ՀԱՅԿԱԿԱՆ ՊԵՏԱԿԱՆ ՄԱՆԿԱՎԱՐԺԱԿԱՆ

ՀԱՄԱԼՍԱՐԱՆ

ՌԵՖԵՐԱՏ

Ֆակուլտետ Մաթեմատիկայի,Ֆիզիկայի և Ինֆորմատիկայի

Բաժին Ինֆորմատիկա

Ուսուցում Հեռակա

Կուրս IV

Առարկա Մասնագիտական ընտրովի դասընթաց Web ծրագրավորում-JQuery

Թեմա JQuery էֆֆեկտներ

Կատարող Տոնականյան Քնքուշ

Դասախոս Խառատյան Վահագն

1
Բովանդակություն

Ներածություն----------------------------------------------------3
Անիմացիայի վերահսկում
.animate()----------------------------------------------------------------------------4
.queue()------------------------------------------------------------------------------5

.clearQueue()---------------------------------------------------------6

.dequeue()--------------------------------------------------------------------------6
.stop()--------------------------------------------------------------------------------7
.delay()-------------------------------------------------------------------------------7
.toggle()------------------------------------------------------------------------------8
$.fx.off-------------------------------------------------------------------------------8

Ստանդարտ անիմացիաներ
.show() .hide()---------------------------------------------------------------------9
.slideDown() .slideUp()---------------------------------------------------------10
.slideToggle()---------------------------------------------------------------------11
.fadeIn() .fadeOut()--------------------------------------------------------------12
.fadeTo()----------------------------------------------------------------------------13
.fadeToggle()----------------------------------------------------------------------14

Եզրակացություն--------------------------------------------------15

2
Ներածություն

jQuery- ը JavaScript գրադարանի անուն է ինչը մեծապես պարզեցնում է ինտերնետային


էջի հետ շփվելու, իրադարձությունները կարգավորելու, անիմացիաներ մշակելու կամ
AJAX տեխնիկան օգտագործելու եղանակը: JavaScript- ի այս գրադարանում դուք ունեք
մուտք դեպի այդքան ծրագրավորված շատ գործառույթներ շատ ժամանակ է խնայում,
և նախագծերը պարզեցվում են jQuery- ի օգտագործման շնորհիվ: Պարզեք, թե որոնք
են ամենատարածված DOM- ը, իրադարձությունները, էֆեկտները և AJAX
գործառույթները, որոնք մենք կարող ենք մուտք գործել jQuery- ի միջոցով:

3
Անիմացիայի վերահսկում
.animate()
Կատարում է օգտագործողի կողմից սահմանված անիմացիա՝ ընտրված տարրերով:
Անիմացիան առաջանում է տարրերի CSS հատկությունների սահուն փոփոխության
պատճառով:

Ֆունկցիան ունի երկու կիրառություն.


.animate (properties, [duration], [easing], [callback])

properties — հատկություններ - անիմացիայի մեջ ներգրավված CSS


հատկությունների և դրանց վերջնական արժեքների ցանկը: 

duration — տեւողությունը ՝ անիմացիայի տեւողությունը: Կարող է տրվել


միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան):

easing — թեթևացում - փոխել անիմացիայի արագությունը (անկախ նրանից, թե այն


կդանդաղի մինչև կատարման ավարտը, թե, ընդհակառակը, կարագանա): (տես
ստորև նկարագրությունը)

callback — հետադարձ զանգը ֆունկցիա է, որը կկանչվի անիմացիայի ավարտից


հետո:

.animate(properties, options):

properties - հատկություններ - անիմացիայի մեջ ներգրավված CSS


հատկությունների և դրանց վերջնական արժեքների ցանկը:
options — ընտրանքներ -լրացուցիչ ընտրանքներ: Պետք է ներկայացված լինի
օբյեկտով, ֆորմատի տարբերակում՝ արժեք : Ընտրանքների ընտրանքներ.
duration — տևողություն - անիմացիայի տևողությունը
easing — թեթևացում - փոխել անիմացիայի արագությունը (անկախ նրանից,
թե այն կդանդաղի մինչև կատարման ավարտը, թե, ընդհակառակը,
արագացնի):
complete — Ամբողջականը ֆունկցիա է, որը կկանչվի անիմացիայի
ավարտից հետո:
4
step — քայլը ֆունկցիա է, որը կկանչվի անիմացիայի յուրաքանչյուր քայլից
հետո:
queue — հերթը բուլյան արժեք է, որը ցույց է տալիս, թե արդյոք ընթացիկ
անիմացիան պետք է տեղադրվի ֆունկցիայի հերթում : Եթե կեղծ է ,
անիմացիան անմիջապես կսկսվի առանց հերթերի:
specialEasing — թույլ է տալիս սահմանել տարբեր հեշտացման արժեքներ
տարբեր CSS պարամետրերի համար: Սահմանված է օբյեկտի կողմից,
ֆորմատի պարամետրով:value :

.queue()
Ստանում կամ փոխում է (կախված անցած պարամետրերից) ֆունկցիայի հերթը:

Փաստն այն է, որ jQuery-ն կապում է մեկ կամ մի քանի ֆունկցիայի հերթեր էջի
տարրերին: Նման հերթում յուրաքանչյուր ֆունկցիա ավտոմատ կերպով կանչվում է,
երբ նախորդն ավարտվի: Անիմացիոն էֆեկտներ կատարող ֆունկցիաները
ավտոմատ կերպով տեղադրվում են այս հերթում: Հերթ () մեթոդը թույլ է տալիս
ստանալ և փոփոխել ֆունկցիայի հերթերը: Այն օգտագործելու երկու տարբերակ կա.
.queue([queueName]) :

Վերադարձնում է ընտրված տարրերի հետ կապված ֆունկցիաների հերթ (որպես


զանգված) : Ընտրովի queueName պարամետրը կարող է օգտագործվել
վերադարձվող հերթի անունը նշելու համար: Լռելյայնորեն սա ստանդարտ «fx»
հերթն է :
.queue ([queueName], newQueue) :

queueName անունով հերթը փոխարինում է newQueue- ով : Լռելյայնորեն,


ստանդարտ «fx» հերթը կփոխարինվի :

.queue ([queueName], հետադարձ զանգ (հաջորդ)) ։

Սահմանում է հետ կանչի գործառույթը հերթի վերջում: Որպեսզի հերթը ճիշտ գործի,
հետ կանչի մեթոդի վերջում պետք է կատարվի երկու գործողություններից մեկը .
next(); կամ $(this).dequeue(); . Այս գործողություններն անհրաժեշտ են հերթի
հետևյալ տարրերի կատարումը սկսելու համար

Դիտարկենք հերթերի ձևավորման ամենապարզ դեպքը.

$ ( '#foo' ) : slideup ( ) . fadeIn ( ) ; // id foo ունեցող տարրին կտա երկու անիմացիա

5
արդյունքում, id foo- ով տարրը կսկսի գործել slideUp() էֆեկտը , իսկ այն մեթոդը, որն
իրականացնում է fadeIn() էֆեկտը , հերթագրվելու է և կսկսի գործել միայն նախորդ
մեթոդի ավարտից հետո:

.clearQueue()
Մաքրում է ընտրված էջի տարրերի ֆունկցիայի հերթը : Մեթոդն ունի մեկ
օգտագործման դեպք.
.clearQueue([queueName]) :

queueName- ը հերթի անունն է: Եթե այն նշված չէ, ստանդարտ «fx» հերթը կջնջվի :

Դիտարկենք ամենապարզ օրինակը.


$('#foo').slideUp().fadeIn();
$('#foo').clearQueue();

կկատարվի հետևյալը. սկզբում id foo- ով տարրին կտրվի երկու անիմացիոն էֆեկտ,


մինչ առաջինն աշխատում է, երկրորդը հերթագրվելու է: Բայց քանի որ clearQueue()
մեթոդը կկիրառվի նաև foo տարրի վրա, հերթը կջնջվի, և դրանից հեռացված fadeIn()
մեթոդը չի գործարկվի։

.dequeue()
Սկսում է հաջորդ գործառույթի կատարումը հերթում: Մեթոդն ունի մեկ
օգտագործման դեպք.
.dequeue([queueName])
queueName- ը հերթի անունն է: Նախնականը ստանդարտ «fx» հերթն է :
Դիտարկենք ամենապարզ օրինակը.
$('#foo').slideUp().fadeIn();
$('#foo').dequeue();

կկատարվի հետևյալը. սկզբում id foo- ով տարրին կտրվի երկու անիմացիոն


էֆեկտ, մինչ առաջինն աշխատում է, երկրորդը հերթագրվելու է: Բայց քանի որ
dequeue() մեթոդը կկիրառվի նաև foo տարրի վրա, երկրորդ մեթոդը՝ fadeIn() ,
կսկսի գործել՝ չսպասելով առաջին անիմացիայի ավարտին։

stop()
Դադարեցնում է ընթացիկ անիմացիայի կատարումը: Մեթոդն ունի մեկ
օգտագործման դեպք.

.stop ([clearQueue], [jumpToEnd]) :

6
Դադարեցնում է ընթացիկ անիմացիայի կատարումը: Անիմացիան դադարեցնելուց
հետո հերթի հաջորդը կսկսվի ավտոմատ կերպով, իհարկե, եթե հերթը դատարկ չէ։
Եթե ցանկանում եք դադարեցնել ամբողջ հերթը, ապա clearQueue պարամետրում
պետք է նշեք true :

Լռելյայնորեն, տարրը կմնա այն դիրքում, որում գտնվել է, երբ կանչվել է .stop() -ը , և
անիմացիայի կանգառը չի կանչվի: Այնուամենայնիվ, եթե jumpToEnd պարամետրը
սահմանեք true , ապա անիմացիան դադարեցվելուց հետո տարրը կընդունի այն
վիճակը, որը պետք է ընդուներ, երբ ավարտվեց : Բացի այդ, անիմացիայի վերջի
մշակիչը կկանչվի, իհարկե, եթե այն դրված է:

.stop([queue], [clearQueue], [jumpToEnd]) :

Մեթոդի այս տարբերակը տարբերվում է նախորդից նրանով, որ այստեղ՝ առաջին


հերթի պարամետրում , կարող եք նշել այն հերթի անունը, որում ցանկանում եք
դադարեցնել անիմացիան:

.delay()
Սահմանում է ֆունկցիայի հերթում հաջորդ ֆունկցիայի ուշացումը : Մեթոդն ունի
մեկ օգտագործման դեպք.

.delay(duration, [queueName]):

Հետաձգում է հաջորդի կատարումը հերթագրված ֆունկցիայի տևողությամբ


միլիվայրկյաններով: Լռելյայնորեն, կանգառը տեղի է ունենում «fx» անունով
ստանդարտ հերթում , այնուամենայնիվ, դուք կարող եք նշել մեկ այլ հերթ՝
օգտագործելով queueName պարամետրը :

Դիտարկենք ամենապարզ օրինակը.


$('#foo').slideUp().delay(300).fadeIn();

id foo-ով տարրին կտրվի երկու անիմացիոն էֆեկտ, ինչպես նաև դրանց միջև 300
միլիվայրկյան ուշացում (դա մոտավորապես վայրկյանի մեկ երրորդն է): Այսինքն,
slideUp() անիմացիան կաշխատի սկզբում , և երկու այլ գործառույթներ կհերթագրվեն
մինչ այն աշխատում է : Առաջին անիմացիայի ավարտից հետո տեղի կունենա 300
միլիվայրկյան ուշացում, որից հետո երկրորդ անիմացիան՝ fadeIn() -ը, կսկսի իր
կատարումը :

7
.toggle()
Հերթով կատարում է մի քանի նշված գործողություններից մեկը: Ունի չորս
օգտագործման դեպք.

.toggle(handler1(eventObject), handler2(eventObject), [handler3(eventObject)])

Իրականացնում է երկու կամ ավելի տրված կարգավորիչի գործառույթներից մեկը


հերթով , ի պատասխան տարրի վրա «սեղմելու»:

.toggle ([[duration], [callback]]) :

Փոխում է ընտրված տարրերի տեսանելիությունը ( ցուցադրում/թաքցնում է ):

duration - անիմացիայի տեւողությունը: Կարող է տրվել միլիվայրկյաններով կամ


լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600 միլիվայրկյան):

callback -ֆունկցիա է, որը կկանչվի անիմացիայի ավարտից հետո:

.toggle( [duration],[easing],[callback]), :
duration- անիմացիայի տեւողությունը: Կարող է տրվել միլիվայրկյաններով կամ
լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600 միլիվայրկյան):

easing- արտաքին տեսքի/անհետացման արագության փոփոխություն (արդյոք այն


կդանդաղի մինչև կատարման ավարտը, թե հակառակը` կարագանա): ( տես
նկարագրությունը )

callback -ֆունկցիա է, որը կկանչվի անիմացիայի ավարտից հետո:

.toggle(showOrHide) :

Ցուցադրում է միայն ( showOrHide = true ) կամ միայն թաքցնում ( showOrHide = false


) ընտրված տարրերը էջում։

$.fx.intervalv :
Այս հատկությունը պարունակում է անիմացիոն կադրերի միջև եղած ժամանակի
քանակը (միլիվայրկյաններով): Լռելյայնորեն այն 13 է: Այս հատկությունը գլոբալ է
jQuery գրադարանի ցանկացած անիմացիայի համար:

8
.fx.off 
Նշելով այս հատկությունը true- ին, դուք կանջատեք բոլոր անիմացիաները, որոնք
հնարավոր է անել jQuery-ի միջոցով: Որպեսզի անիմացիաները նորից աշխատեն,
դուք պետք է դարձնեք այս հատկությունը false- ի :

Պարզ օրինակ.
jQuery.fx.off = true;
$('#foo').slideUp().fadeIn();

Ստանդարտ անիմացիաներ
.show() .hide()
Այս գործառույթներով դուք կարող եք սահուն կերպով ցուցադրել և թաքցնել ընտրված
տարրերը էջում՝ փոխելով չափը և թափանցիկությունը: Նկատի ունեցեք, որ տարրը
թաքցվելուց հետո նրա css ցուցադրման հատկությունը դառնում է none , և մինչ
հայտնվելը, այն հետ է ստանում իր նախկին արժեքը: Մեթոդն ունի երեք
օգտագործման դեպք.

show(duration,[callback]) .hide(duration,[callback])
Անմիջապես ցույց է տալիս/թաքցնում ընտրված տարրերը՝ դրանց css ցուցադրման
հատկությունը սահմանելով none- ի վրա ՝ առանց դրանց անթափանցիկությունը կամ
չափը փոխելու:

duration-անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել


միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Եթե այս պարամետրը սահմանված չէ, անիմացիան կլինի
ակնթարթային, տարրը պարզապես կհայտնվի/անհետանա

callback-գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման կարգավորիչ


(հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

.show([duration],[easing],[callback]) .hide([duration],[easing],[callback])
duration —անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600

9
միլիվայրկյան): Եթե այս պարամետրը սահմանված չէ, անիմացիան կլինի
ակնթարթային, տարրը պարզապես կհայտնվի/անհետանա

easing —փոխել անիմացիայի արագությունը (անկախ նրանից, թե այն կդանդաղի


մինչև կատարման ավարտը, թե, ընդհակառակը, կարագանա):

Callback- գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման կարգավորիչ


(հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

Օգտագործման օրինակներ.
$("#leftFit").hide() ակնթարթորեն կթաքցնի տարրը id leftFit-ով :

$("#leftFit").show() ակնթարթորեն ցույց կտա տարրը id leftFit-ով :

$("#leftFit").hide(300) վայրկյանի 1/3-ի ընթացքում կթաքցնի տարրը id leftFit-ով :

$("#leftFit").show("slow") 600 միլիվայրկյան ընթացքում տեսանելիությունը


կվերադարձնի տարրին՝ leftFit id-ով :

.slideDown() .slideUp()
Այս գործառույթներով դուք կարող եք ցուցադրել և թաքցնել ընտրված տարրերը էջի
վրա՝ սահուն ընդլայնելով և փլուզելով: Նկատի ունեցեք, որ տարրը թաքցվելուց հետո
նրա css ցուցադրման հատկությունը դառնում է none , և մինչ հայտնվելը, այն հետ է
ստանում իր նախկին արժեքը: Մեթոդներն ունեն երկու կիրառություն.

.show() .hide():
slideDown([duration],[callback]) .slideUp([duration],[callback]):

duration —անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել


միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:

callback--գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման կարգավորիչ


(հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

.slideDown([duration],[easing],[callback]) .slideUp([duration],[easing],[callback]):

10
duration — անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան

easing — փոխել անիմացիայի արագությունը (անկախ նրանից, թե այն կդանդաղի


մինչև կատարման ավարտը, թե, ընդհակառակը, կարագանա):

callback — գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման կարգավորիչ


(հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար։

Օգտագործման օրինակներ.
$("#leftFit").slideUp() 400 ms-ով կփլուզի տարրը id leftFit- ով:

$("#leftFit").slideDown() կընդլայնի տարրը id leftFit- ով 400 մվ-ով:

$("#leftFit").slideUp(300) կփլուզի տարրը id leftFit- ով վայրկյանի 1/3-ի ընթացքում

$("#leftFit").slideDown("slow") 600 մվ-ի ընթացքում կընդլայնի տարրը id leftFit-ով :

.slideToggle()
Այս մեթոդը սահուն անվանելով ՝ էջի ընտրված տարրերը փլվում են (եթե տարրը
ընդլայնված է) կամ ընդլայնվում (եթե տարրը փլուզված է) : Նկատի ունեցեք, որ
տարրը թաքցվելուց հետո նրա css ցուցադրման հատկությունը դառնում է none , և
մինչ հայտնվելը, այն հետ է ստանում իր նախկին արժեքը: Մեթոդն ունի երկու
կիրառություն.

.slideToggle([duration],[callback]):
duration — անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:

callback — գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման


կարգավորիչ (հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում,
սակայն ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի
DOM օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

.slideToggle([duration],[easing],[callback]):

11
duration — անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:

easing — փոխել անիմացիայի արագությունը (անկախ նրանից, թե այն կդանդաղի


մինչև կատարման ավարտը, թե, ընդհակառակը, կարագանա):

callback — գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման


կարգավորիչ (հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում,
սակայն ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի
DOM օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

Օգտագործման օրինակներ
$("#leftFit").slideToggle() կկոլապսի /ընդլայնի տարրը id leftFit- ով 400 մվ-ով:

$("#leftFit").slideToggle(300) կոլապսի/ընդլայնի տարրը leftFit id-ով վայրկյանի 1/3-ի


ընթացքում :

$("#leftFit").slideToggle("slow") 600 ms-ի ընթացքում կկոլապսի/ընդլայնի տարրը


leftFit նույնացուցիչով :

.fadeIn() .fadeOut()
Այս գործառույթներով դուք կարող եք ցուցադրել և թաքցնել ընտրված տարրերը էջում՝
սահուն կերպով փոխելով թափանցիկությունը: Նկատի ունեցեք, որ տարրը
թաքցնելուց հետո նրա css ցուցադրման հատկությունը ինքնաբերաբար դրվում է none-
ի, և մինչ այն հայտնվելը, այն հետ է ստանում իր նախկին արժեքը: Մեթոդներն ունեն
երկու կիրառություն.

.fadeIn([duration],[callback]) .fadeOut([duration],[callback]):

duration —անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել


միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:

callback —գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման կարգավորիչ


(հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM

12
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

.fadeIn([duration],[easing],[callback]) .fadeOut([duration],[easing],[callback]):

duration —անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել


միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:

easing —փոխել անիմացիայի արագությունը (անկախ նրանից, թե այն կդանդաղի


մինչև կատարման ավարտը, թե, ընդհակառակը, կարագանա):

callback — գործառույթ է, որը նշված է որպես անիմացիայի դադարեցման կարգավորիչ


(հայտնվել կամ թաքցնել): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

Օգտագործման օրինակներ
$("#leftFit").fadeOut() id leftFit-ով տարրը «կլուծարվի» 400 մվ-ում:

$("#leftFit").fadeIn() id leftFit-ով տարրը «կմաքրվի » 400 մվ-ից:

$("#leftFit").fadeOut(300) վայրկյանի 1/3-ի ընթացքում ձախ Fit id- ով տարրը


կվերանա:

$("#leftFit").fadeIn("slow") 600 մվ-ի ընթացքում կհայտնվի id leftFit- ով տարր :

.fadeTo()
Փոխում է էջի ընտրված տարրերի թափանցիկության մակարդակը : Թույլ է տալիս
սահուն փոխել թափանցիկությունը: Մեթոդն ունի երկու կիրառություն.

.fadeTo(duration, opacity, [callback])


duration — թափանցիկության փոփոխության տևողությունը: Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան):

opacity — պահանջվող թափանցիկության արժեքը: Պետք է նշվի որպես 0-ից 1 թիվ (0 -


լրիվ թափանցիկություն, 1 - ոչ թափանցիկ):

callback — գործառույթն է, որը նշված է որպես թափանցիկության փոփոխության


ավարտի մշակիչ: Դրան ոչ մի պարամետր չի փոխանցվում, սակայն ֆունկցիայի
13
ներսում այս փոփոխականը կպարունակի այն տարրի DOM օբյեկտը, որի
թափանցիկությունը փոխվում է: Եթե կան մի քանի նման տարրեր, ապա մշակիչը
կկանչվի առանձին յուրաքանչյուր տարրի համար:

.fadeTo([duration], opacity, [easing], [callback])։


duration —— թափանցիկության փոփոխության տևողությունը: Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան):

opacity — պահանջվող թափանցիկության արժեքը: Պետք է նշվի որպես 0-ից 1 թիվ (0 -


լրիվ թափանցիկություն, 1 - ոչ թափանցիկ):

easing — թափանցիկության փոփոխության դինամիկան (արդյոք այն կդանդաղի


մինչև վազքի ավարտը, թե, ընդհակառակը, կարագանա):

callback — գործառույթն է, որը նշված է որպես թափանցիկության փոփոխության


ավարտի մշակիչ: Դրան ոչ մի պարամետր չի փոխանցվում, սակայն ֆունկցիայի
ներսում այս փոփոխականը կպարունակի այն տարրի DOM օբյեկտը, որի
թափանցիկությունը փոխվում է: Եթե կան մի քանի նման տարրեր, ապա մշակիչը
կկանչվի առանձին յուրաքանչյուր տարրի համար:

Օգտագործման օրինակներ
$("#leftFit").fadeTo(0, 0.5) d leftFit- ով տարրն անմիջապես կիսաթափանցիկ կդառնա:

$("#leftFit").fadeTo(500, 0.1) id leftFit- ով տարրը կես վայրկյանում գրեթե


անտեսանելի կդառնա:

.fadeToggle()
Այս մեթոդը կանչելը հանգեցնում է նրան, որ ընտրված տարրերը խամրում են (եթե
տարրը թաքցված չէ) կամ հայտնվում (եթե տարրը թաքցված է) էջում՝ փոխելով
թափանցիկությունը: Նկատի ունեցեք, որ տարրը թաքցվելուց հետո նրա
css ցուցադրման հատկությունը դառնում է none , և մինչ հայտնվելը, այն հետ է
ստանում իր նախկին արժեքը: Մեթոդն ունի մեկ օգտագործման դեպք.
fadeToggle([duration],[easing],[callback]):
duration -- անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:

easing — փոխել անիմացիայի արագությունը (անկախ նրանից, թե այն կդանդաղի


մինչև կատարման ավարտը, թե, ընդհակառակը, կարագանա):

14
callback — գործառույթ է, որը նշված է որպես անիմացիայի ավարտի մշակիչ
(տեսանելիություն կամ թաքնված): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:

Օգտագործման օրինակներ.
$("#leftFit").fadeToggle() կթաքցնի /կցուցադրի id leftFit- ով տարրը 400 մվ-ում:

$("#leftFit").fadeToggle(300) 1/3 վայրկյանի ընթացքում կթաքցնի/ցուցադրի տարրը


id leftFit-ով :

$("#leftFit").fadeToggle("slow") 600 մվ-ի ընթացքում կթաքցնի/ցուցադրի տարրը id


leftFit-ով :

Եզրակացություն
Երբեմն ամենաօգտակար տեխնոլոգիաները սովորելու լավագույնը չեն: Զարգացումը
բարդ գործընթաց է, և երբեմն չափազանց բարդ լեզու սովորելը կարող է
ամբողջությամբ կոտրել սովորելու ձեր կամքը:Վեբ ծրագրավորողներից շատերը
սկսում են jQuery-ից: Թեև JavaScript-ի հիմունքները սովորելը համարվում է
առաջնային ծրագրավորող դառնալու ամենակարևոր մասը, կարևոր է նաև զգալ ձեր
ջանքերի արդյունքները: jQuery-ն կարող է օգնել ձեզ հենց դա անել:Երբ տեսնեք, որ
ձեր նախագիծն աշխատում է jQuery-ի հետ, դուք ավելի մոտիվացված կլինեք
շարունակել ավելի բարդ բան սովորել:Լավագույն տարբերակը կլինի սկսել JavaScript-
ի հիմունքներից: jQuery-ն կարող է հիանալի լրացում լինել ձեր գիտելիքներին:

15

You might also like