Professional Documents
Culture Documents
J Query
J Query
ՀԱՄԱԼՍԱՐԱՆ
ՌԵՖԵՐԱՏ
Բաժին Ինֆորմատիկա
Ուսուցում Հեռակա
Կուրս IV
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
Ներածություն
3
Անիմացիայի վերահսկում
.animate()
Կատարում է օգտագործողի կողմից սահմանված անիմացիա՝ ընտրված տարրերով:
Անիմացիան առաջանում է տարրերի CSS հատկությունների սահուն փոփոխության
պատճառով:
.animate(properties, options):
.queue()
Ստանում կամ փոխում է (կախված անցած պարամետրերից) ֆունկցիայի հերթը:
Փաստն այն է, որ jQuery-ն կապում է մեկ կամ մի քանի ֆունկցիայի հերթեր էջի
տարրերին: Նման հերթում յուրաքանչյուր ֆունկցիա ավտոմատ կերպով կանչվում է,
երբ նախորդն ավարտվի: Անիմացիոն էֆեկտներ կատարող ֆունկցիաները
ավտոմատ կերպով տեղադրվում են այս հերթում: Հերթ () մեթոդը թույլ է տալիս
ստանալ և փոփոխել ֆունկցիայի հերթերը: Այն օգտագործելու երկու տարբերակ կա.
.queue([queueName]) :
Սահմանում է հետ կանչի գործառույթը հերթի վերջում: Որպեսզի հերթը ճիշտ գործի,
հետ կանչի մեթոդի վերջում պետք է կատարվի երկու գործողություններից մեկը .
next(); կամ $(this).dequeue(); . Այս գործողություններն անհրաժեշտ են հերթի
հետևյալ տարրերի կատարումը սկսելու համար
5
արդյունքում, id foo- ով տարրը կսկսի գործել slideUp() էֆեկտը , իսկ այն մեթոդը, որն
իրականացնում է fadeIn() էֆեկտը , հերթագրվելու է և կսկսի գործել միայն նախորդ
մեթոդի ավարտից հետո:
.clearQueue()
Մաքրում է ընտրված էջի տարրերի ֆունկցիայի հերթը : Մեթոդն ունի մեկ
օգտագործման դեպք.
.clearQueue([queueName]) :
queueName- ը հերթի անունն է: Եթե այն նշված չէ, ստանդարտ «fx» հերթը կջնջվի :
.dequeue()
Սկսում է հաջորդ գործառույթի կատարումը հերթում: Մեթոդն ունի մեկ
օգտագործման դեպք.
.dequeue([queueName])
queueName- ը հերթի անունն է: Նախնականը ստանդարտ «fx» հերթն է :
Դիտարկենք ամենապարզ օրինակը.
$('#foo').slideUp().fadeIn();
$('#foo').dequeue();
stop()
Դադարեցնում է ընթացիկ անիմացիայի կատարումը: Մեթոդն ունի մեկ
օգտագործման դեպք.
6
Դադարեցնում է ընթացիկ անիմացիայի կատարումը: Անիմացիան դադարեցնելուց
հետո հերթի հաջորդը կսկսվի ավտոմատ կերպով, իհարկե, եթե հերթը դատարկ չէ։
Եթե ցանկանում եք դադարեցնել ամբողջ հերթը, ապա clearQueue պարամետրում
պետք է նշեք true :
Լռելյայնորեն, տարրը կմնա այն դիրքում, որում գտնվել է, երբ կանչվել է .stop() -ը , և
անիմացիայի կանգառը չի կանչվի: Այնուամենայնիվ, եթե jumpToEnd պարամետրը
սահմանեք true , ապա անիմացիան դադարեցվելուց հետո տարրը կընդունի այն
վիճակը, որը պետք է ընդուներ, երբ ավարտվեց : Բացի այդ, անիմացիայի վերջի
մշակիչը կկանչվի, իհարկե, եթե այն դրված է:
.delay()
Սահմանում է ֆունկցիայի հերթում հաջորդ ֆունկցիայի ուշացումը : Մեթոդն ունի
մեկ օգտագործման դեպք.
.delay(duration, [queueName]):
id foo-ով տարրին կտրվի երկու անիմացիոն էֆեկտ, ինչպես նաև դրանց միջև 300
միլիվայրկյան ուշացում (դա մոտավորապես վայրկյանի մեկ երրորդն է): Այսինքն,
slideUp() անիմացիան կաշխատի սկզբում , և երկու այլ գործառույթներ կհերթագրվեն
մինչ այն աշխատում է : Առաջին անիմացիայի ավարտից հետո տեղի կունենա 300
միլիվայրկյան ուշացում, որից հետո երկրորդ անիմացիան՝ fadeIn() -ը, կսկսի իր
կատարումը :
7
.toggle()
Հերթով կատարում է մի քանի նշված գործողություններից մեկը: Ունի չորս
օգտագործման դեպք.
.toggle( [duration],[easing],[callback]), :
duration- անիմացիայի տեւողությունը: Կարող է տրվել միլիվայրկյաններով կամ
լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600 միլիվայրկյան):
.toggle(showOrHide) :
$.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- ի վրա ՝ առանց դրանց անթափանցիկությունը կամ
չափը փոխելու:
.show([duration],[easing],[callback]) .hide([duration],[easing],[callback])
duration —անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
9
միլիվայրկյան): Եթե այս պարամետրը սահմանված չէ, անիմացիան կլինի
ակնթարթային, տարրը պարզապես կհայտնվի/անհետանա
Օգտագործման օրինակներ.
$("#leftFit").hide() ակնթարթորեն կթաքցնի տարրը id leftFit-ով :
.slideDown() .slideUp()
Այս գործառույթներով դուք կարող եք ցուցադրել և թաքցնել ընտրված տարրերը էջի
վրա՝ սահուն ընդլայնելով և փլուզելով: Նկատի ունեցեք, որ տարրը թաքցվելուց հետո
նրա css ցուցադրման հատկությունը դառնում է none , և մինչ հայտնվելը, այն հետ է
ստանում իր նախկին արժեքը: Մեթոդներն ունեն երկու կիրառություն.
.show() .hide():
slideDown([duration],[callback]) .slideUp([duration],[callback]):
.slideDown([duration],[easing],[callback]) .slideUp([duration],[easing],[callback]):
10
duration — անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան
Օգտագործման օրինակներ.
$("#leftFit").slideUp() 400 ms-ով կփլուզի տարրը id leftFit- ով:
.slideToggle()
Այս մեթոդը սահուն անվանելով ՝ էջի ընտրված տարրերը փլվում են (եթե տարրը
ընդլայնված է) կամ ընդլայնվում (եթե տարրը փլուզված է) : Նկատի ունեցեք, որ
տարրը թաքցվելուց հետո նրա css ցուցադրման հատկությունը դառնում է none , և
մինչ հայտնվելը, այն հետ է ստանում իր նախկին արժեքը: Մեթոդն ունի երկու
կիրառություն.
.slideToggle([duration],[callback]):
duration — անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:
.slideToggle([duration],[easing],[callback]):
11
duration — անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:
Օգտագործման օրինակներ
$("#leftFit").slideToggle() կկոլապսի /ընդլայնի տարրը id leftFit- ով 400 մվ-ով:
.fadeIn() .fadeOut()
Այս գործառույթներով դուք կարող եք ցուցադրել և թաքցնել ընտրված տարրերը էջում՝
սահուն կերպով փոխելով թափանցիկությունը: Նկատի ունեցեք, որ տարրը
թաքցնելուց հետո նրա css ցուցադրման հատկությունը ինքնաբերաբար դրվում է none-
ի, և մինչ այն հայտնվելը, այն հետ է ստանում իր նախկին արժեքը: Մեթոդներն ունեն
երկու կիրառություն.
.fadeIn([duration],[callback]) .fadeOut([duration],[callback]):
12
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:
.fadeIn([duration],[easing],[callback]) .fadeOut([duration],[easing],[callback]):
Օգտագործման օրինակներ
$("#leftFit").fadeOut() id leftFit-ով տարրը «կլուծարվի» 400 մվ-ում:
.fadeTo()
Փոխում է էջի ընտրված տարրերի թափանցիկության մակարդակը : Թույլ է տալիս
սահուն փոխել թափանցիկությունը: Մեթոդն ունի երկու կիրառություն.
Օգտագործման օրինակներ
$("#leftFit").fadeTo(0, 0.5) d leftFit- ով տարրն անմիջապես կիսաթափանցիկ կդառնա:
.fadeToggle()
Այս մեթոդը կանչելը հանգեցնում է նրան, որ ընտրված տարրերը խամրում են (եթե
տարրը թաքցված չէ) կամ հայտնվում (եթե տարրը թաքցված է) էջում՝ փոխելով
թափանցիկությունը: Նկատի ունեցեք, որ տարրը թաքցվելուց հետո նրա
css ցուցադրման հատկությունը դառնում է none , և մինչ հայտնվելը, այն հետ է
ստանում իր նախկին արժեքը: Մեթոդն ունի մեկ օգտագործման դեպք.
fadeToggle([duration],[easing],[callback]):
duration -- անիմացիայի տևողությունը (երևալ կամ թաքցնել): Կարող է տրվել
միլիվայրկյաններով կամ լարային արժեքը «արագ» կամ «դանդաղ» (200 և 600
միլիվայրկյան): Լռելյայնորեն, անիմացիան կտևի 400 միլիվայրկյան:
14
callback — գործառույթ է, որը նշված է որպես անիմացիայի ավարտի մշակիչ
(տեսանելիություն կամ թաքնված): Դրան ոչ մի պարամետր չի փոխանցվում, սակայն
ֆունկցիայի ներսում այս փոփոխականը կպարունակի անիմացիոն տարրի DOM
օբյեկտը: Եթե կան մի քանի նման տարրեր, ապա մշակիչը կկանչվի առանձին
յուրաքանչյուր տարրի համար:
Օգտագործման օրինակներ.
$("#leftFit").fadeToggle() կթաքցնի /կցուցադրի id leftFit- ով տարրը 400 մվ-ում:
Եզրակացություն
Երբեմն ամենաօգտակար տեխնոլոգիաները սովորելու լավագույնը չեն: Զարգացումը
բարդ գործընթաց է, և երբեմն չափազանց բարդ լեզու սովորելը կարող է
ամբողջությամբ կոտրել սովորելու ձեր կամքը:Վեբ ծրագրավորողներից շատերը
սկսում են jQuery-ից: Թեև JavaScript-ի հիմունքները սովորելը համարվում է
առաջնային ծրագրավորող դառնալու ամենակարևոր մասը, կարևոր է նաև զգալ ձեր
ջանքերի արդյունքները: jQuery-ն կարող է օգնել ձեզ հենց դա անել:Երբ տեսնեք, որ
ձեր նախագիծն աշխատում է jQuery-ի հետ, դուք ավելի մոտիվացված կլինեք
շարունակել ավելի բարդ բան սովորել:Լավագույն տարբերակը կլինի սկսել JavaScript-
ի հիմունքներից: jQuery-ն կարող է հիանալի լրացում լինել ձեր գիտելիքներին:
15