განხილვა: 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("ის აქაა!");
});

თქვენ ასევე შეგიძლიათ, რამდენიმე ეფექტი გადააბათ ერთმანეთს და გამოიძახოთ delay(), თუ გსურთ მათ შორის ინტერვალის ჩასმა:

$("#pic").slideUp(300).delay().fadeIn();

საკუთარი ანიმაცია

თუ გსურთ კონკრეტული CSS თვისებების ანიმირება, შეგიძლიათ, გამოიყენოთ animate():

    $("#pic").animate({
       width: "70%",
       opacity: 0{,}7,
       padding: 20
    }, 1000);

გაითვალისწინეთ, რომ თქვენ შეგიძლიათ მხოლოდ იმ CSS თვისებების ანიმირება, რომელთაც აქვთ რიცხობრივი მნიშვნელობები - შესაბამისად, თქვენ არ შეგიძლიათ ისეთი თვისებების ანიმირება, როგორიცაა 'color' (ფერი) (იხილეთ მაგალითი)

თქვენ ასევე შეგიძლიათ, მიაბათ უკუგამოძახების ფუნქციები animate()-ს, თუ გსურთ, გაიგოთ, რა ეტაპზეა ანიმაცია ან დამთავრდა თუ არა ის. გადახედეთ დოკუმენტაციას მეტი ინფორმაციისთვის.

ანიმაცია პასუხისმგებლობით

ანიმაციებმა უნდა არა გააუარესონ, არამედ გააუმჯობესონ მომხმარებლის გამოცდილება. ანიმაციის დანიშნულებაა, დაეხმაროს მომხმარებლებს, უკეთ გაიგონ თქვენი ვებ აპლიკაციის მდგომარეობა, ან უბრალოდ გახადოს ეს აპლიკაცია უფრო მხიარული. ანიმაციამ არ უნდა შეანელოს საჭიროების გარეშე და გააუარესოს აპლიკაცია და, შესაბამისად, არ უნდა გაანაწყენოს მომხმარებელი. თქვენ შეგიძლიათ, გამოჰკითხოთ მომხმარებლები თქვენი ანიმაციების თაობაზე ან დიზაინერთან ერთად გადაწყვითოთ, თუ სად და როგორ გამოიყენოთ ისინი.

თუ იცით, რომ თქვენი მომხმარებელი იყენებს მოწყობილობას, რომელიც კარგად ვერ უშვებს ანიმაციებს, შეგიძლიათ, განსაზღვროთ $.fx.off, როგორც true (ჭეშმარიტი).

გსურთ, შეუერთდეთ დისკუსიას?

შესვლა

დავალაგოთ:

პოსტები ჯერ არ არის.

გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.