Հիմնական նյութ
Դասընթաց․ (Ծրագրավորում) > Բաժին 7
Դաս 7: DOM-ի անիմացիան և էֆեկտները jQuery-ովDOM-ի անիմացիա jQuery-ում. ամփոփում
Անիմացիայի և էֆեկտների համար jQuery-ն տրամադրում է մի շարք ֆունկցիաներ, որոնք տեղադրված են նրա փաստաթղթավորման մեջ։
Տեսանելիության փոփոխում
Պարզ տեսանելիության փոփոխությունների համար օգտագործիր
hide()
և show()
:$("#pic").hide();
$("#pic").show();
(Տես օրինակը)Կարող ես նաև օգտագործել անցում/
toggle()
, որը որոշում կկայացնի՝ ցուցադրե՞լ, թե՞ թաքցնել տեսանելիությունը՝ կախված ընթացիկ տեսքից:
$("#pic").toggle();
(Տես օրինակը)Կարող ես տևողություն փոխանցել այս ֆունկցիաներից ցանկացածին, իսկ հետո jQuery-ն անիմացիայի կենթարկի տեսանելիության փոփոխումը՝
$("#pic").toggle(1000);
Կարող ես սլայդի էֆեկտների համար օգտագործել նաև
slideDown()
, slideUp()
և slideToggle()
(Տես օրինակը) կամ fadeIn()
, fadeOut()
և fadeToggle()
գունաթափման էֆեկտների համար
(Տես օրինակը):Կարող ես փոխանցել հետկանչման ֆունցկիան՝ որպես երկրորդ պարամետր այս ֆունկցիաներից ցանկացածին, և հետո jQuery-ն կկանչի այդ հետկանչման ֆունկցիան, երբ անիմացիայի գործընթացն ավարտված լինի՝
$("#pic").toggle(1000, function() {
$("body").append("It's here!");
});
Կարող ես նաևմի քանի էֆեկտ շղթայել միասին և կանչել
delay()
, եթե ուզում ես ունենալ ուշացում նրանց միջև՝$("#pic").slideUp(300).delay().fadeIn();
Անհատականացնել անիմացիան
Եթեուզում ես անիմացիայի ենթարկել հստակ CSS հատկություններ, ապա կարող ես
animate()
օգտագործել. $("#pic").animate({
լայնությունը/ width: "70%",
մգությունը/ opacity: 0,7,
լիցք/ padding: 20
}, 1000);
Ուշադրություն դարձրու, որ կարող ես անիմացիայի ենթարկել միայն թվային արժեքներով CSS հատկություններ։ Այսինքն՝ չես կարող օգտագործել այն, որպեսզի անիմացիայի ենթարկես 'color'-ի նման հատկություններ (Տես օրինակը):
Եթե ուզում ես իմանալ, թե երբ է անիմացիան առաջընթաց ապրել կամ ավարտվել, կարող ես
animate()
-ում մի քանի հետկանչման ֆունկցիա կցել։ Ստուգիր փաստաթղթավորումը՝ մանրամասներ իմանալու համար։Պատասխանատու կերպով կատարված անիմացիաներ
Անիմացիաները միշտ պետք է բարելավեն օգտատիրոջ հետազոտությունները և փորձը, ոչ թե բարդացնեն դրանք։ Անիմացիաները պետք է միշտ օգնեն օգտատերերին՝ հասկանալ իրենց կայքի հավելվածի մասին և, ինչու ոչ, օգտատիրոջ փորձը մի փոքր զվարճալի դարձնեն։ Նրանք չպետք է դանդաղեցնեն փորձարկումները՝ առանց որևէ պատճառի և հիասթափեցնեն օգտատիրոջը։ Կարող ես միշտ հարցնել օգտատերերին իրենց նկատառումների մասին քո անիմացիաների օգտագործման վերաբերյալ կամ կարող ես համագործակցել դիզայների հետ, որպեսզի միասին որոշեք՝ ինչպես և որտեղ կատարեք անիմացիա։
Եթե քո օգտատիրոջ կարգավիճակը այնպիսի սարքով է, որը լավ չի աշխատում անիմացիաներով, ապա կարող ես սահմանել
$.fx.off
դեպի true
։Ուզո՞ւմ ես միանալ խոսակցությանը։
Առայժմ հրապարակումներ չկան։