JQuery, ինչպես կարող ենք դինամիկ էֆեկտներ իրականացնել JQuery-ով

JQuery-ի միջոցով դուք կարող եք ստեղծել դինամիկ էֆեկտներ, անիմացիաներ և խամրումներ՝ գործելով HTML էջի տարրերի վրա:

Այս հոդվածում մենք կտեսնենք, թե ինչպես օգտագործել JQuery-ի տարբեր մեթոդներ անիմացիաներ ստեղծելու համար:

Թաքցնել և ցուցադրել HTML տարրը

մեթոդները hide() Եվ show()

Hide() մեթոդը պարզապես սահմանում է ոճը inline display: none ընտրված իրերի համար: Եվ հակառակը, show() մեթոդը վերականգնում է ցուցադրման հատկությունները: 

Տեսնենք մի օրինակ.

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

Առաջին դեպքում պարբերությունը թաքցվում է, երբ սեղմում եք կոճակը (hide-btn), երկրորդ դեպքում պարբերությունը ցուցադրվում է կոճակի վրա սեղմելիս (show-btn).

Դուք կարող եք նաև նշել տևողության պարամետրը՝ շոուն աշխուժացնելու և որոշ ժամանակով էֆեկտը թաքցնելու համար:

Տևողությունները կարող են սահմանվել՝ օգտագործելով նախնական տողերից մեկըdefiնիտ 'slow' o 'fast', կամ մի քանի միլիվայրկյաններով՝ ավելի մեծ ճշգրտության համար. ավելի բարձր արժեքները ցույց են տալիս ավելի դանդաղ անիմացիաներ:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

Լարը նախdefiՆիտա 'fast' ցույց է տալիս 200 միլիվայրկյան տեւողություն, մինչդեռ լարը 'slow' ցույց է տալիս 600 միլիվայրկյան տեւողությունը։

Մենք կարող ենք նշել գործառույթը callback պետք է իրականացվի մեթոդի ավարտից հետո show() կամ dell- ը hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

Փոխարկման մեթոդը

jQuery մեթոդը toggle() ցույց տալ կամ թաքցնել տարրերն այնպես, որ եթե տարրն ի սկզբանե ցուցադրվի, այն թաքնվի. հակառակը, եթե թաքնված է, այն կցուցադրվի (գործնականում փոխում է դրա տեսանելիությունը):

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

Նմանապես, դուք կարող եք նշել պարամետրը duration մեթոդի համար toggle(), այնպես, որ կենդանացնի անցումը տեսանելի և թաքնված, ինչպես մեթոդները show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

Նմանապես, դուք կարող եք նաև նշել գործառույթը callback մեթոդի համար toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

jQuery-ի մարման էֆեկտներ

մեթոդները fadeIn() e fadeOut()

Դուք կարող եք օգտագործել jQuery մեթոդները fadeIn()e fadeOut() ցույց տալ կամ թաքցնել HTML տարրերը՝ աստիճանաբար ավելացնելով կամ նվազեցնելով դրանց անթափանցիկությունը և ստեղծելով մարման էֆեկտ։

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Ինչպես jQuery էֆեկտների այլ մեթոդները, դուք կարող եք կամայականորեն նշել մեթոդների տևողությունը կամ արագության պարամետրը fadeIn()e fadeOut(), ֆեյդի տեւողությունը վերահսկելու համար։ Տևողությունները կարող են սահմանվել՝ օգտագործելով նախնական տողերից մեկըdefiնիտ 'slow' o 'fast', կամ մի քանի միլիվայրկյաններով; ավելի բարձր արժեքները ցույց են տալիս ավելի դանդաղ անիմացիաներ:

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

մեթոդների ազդեցությունը fadeIn() / fadeOut() Այն նման է show() / hide(), բայց ի տարբերություն մեթոդների show() / hide(), առաջինները միայն կենդանացնում են թիրախային տարրերի անթափանցիկությունը և չեն կենդանացնում դրանց չափերը։

Նաև կարող եք նշել գործառույթը callback վազել մեթոդների ավարտից հետո fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

Metodo fadeToggle()

jQuery մեթոդը fadeToggle() ցուցադրում կամ թաքցնում է ընտրված տարրերը՝ աշխուժացնելով դրանց անթափանցիկությունը այնպես, որ եթե տարրը սկզբում ցուցադրվի, այն կխամրվի. եթե այն թաքնված էր, այն կթուլանա (այսինքն՝ միացնել մարման էֆեկտը):

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Դուք կարող եք նաև նշել մեթոդի կյանքի պարամետրը fadeToggle() ինչ վերաբերում է մեթոդներին fadeIn() / fadeOut(), վերահսկելու fade անիմացիայի տևողությունը կամ արագությունը:

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

FadeToggle() մեթոդն ունի նաև գործառույթ նշելու հնարավորություն callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

Metodo fadeTo()

jQuery մեթոդը fadeTo() այն նման է մեթոդին fadeIn(), բայց ի տարբերություն մեթոդի fadeIn(), մեթոդը fadeTo() թույլ է տալիս միավորել տարրերը մինչև որոշակի մակարդակի անթափանցիկություն:

$(selector).fadeTo(speed, opacity, callback);

Պահանջվող պարամետրը opacity սահմանում է թիրախային տարրերի վերջնական անթափանցիկությունը, որը կարող է լինել 0-ից 1-ի միջև ընկած թիվ: Պարամետրը duration o speed այն նաև պահանջվում է այս մեթոդի համար, որը սահմանում է անիմացիայի խամրման տևողությունը:

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

Ոլորման էֆեկտներ

մեթոդները slideUp() e slideDown()

jQuery մեթոդը slideUp() e slideDown() օգտագործվում են HTML տարրերը թաքցնելու կամ ցուցադրելու համար՝ աստիճանաբար նվազեցնելով կամ ավելացնելով դրանց բարձրությունը (այսինքն՝ ոլորելով դրանք վեր կամ վար):

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

Ինչպես jQuery էֆեկտների այլ մեթոդները, դուք կարող եք կամայականորեն նշել մեթոդների տևողությունը կամ արագության պարամետրը slideUp() e slideDown() վերահսկելու սլայդի անիմացիայի տևողությունը: Տևողությունները կարող են սահմանվել՝ օգտագործելով նախնական տողերից մեկըdefiնիտ 'slow' o 'fast', կամ մի քանի միլիվայրկյաններով; ավելի բարձր արժեքները ցույց են տալիս ավելի դանդաղ անիմացիաներ:

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

Կարող եք նաև նշել հետադարձ զանգի ֆունկցիա, որը պետք է կատարվի մեթոդի ավարտից հետո slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

Metodo slideToggle()

jQuery մեթոդը slideToggle() ցույց տալ կամ թաքցնել ընտրված տարրերը՝ շարժելով դրանց բարձրությունը, որպեսզի եթե տարրը սկզբում ցուցադրվի, այն ոլորվի դեպի վեր; եթե թաքնված է, այն կտեղափոխվի ներքև, այսինքն՝ կփոխանցվի մեթոդների միջև slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Նմանապես, դուք կարող եք նշել մեթոդի կյանքի պարամետրը slideToggle() Գալ slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

Նմանապես, դուք կարող եք նաև նշել մեթոդի համար հետ կանչելու ֆունկցիա slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

Անիմացիոն էֆեկտներ

Metodo animate()

jQuery մեթոդը animate() այն օգտագործվում է հատուկ անիմացիաներ ստեղծելու համար: Մեթոդը animate() օգտագործվում է թվային CSS հատկությունները շարժելու համար, ինչպիսիք են width, height, margin, padding, opacity, top, left և այլն: բայց ոչ թվային հատկություններ, ինչպիսիք են color o background-color դրանք չեն կարող անիմացիոն լինել՝ օգտագործելով jQuery հիմնական ֆունկցիոնալությունը:

Մեթոդի հիմնական շարահյուսությունը animate() դա հետևյալն է.

$(selector).animate({ properties }, duration, callback);

Մեթոդի պարամետրեր animate() ունեն հետևյալ իմաստները.

• Պահանջվող հատկությունների պարամետրը defiավարտել CSS-ի հատկությունները՝ անիմատիվացնելու համար:
• Լրացուցիչ տևողության պարամետրը սահմանում է, թե որքան ժամանակ կաշխատի անիմացիան: Տևողությունները կարող են սահմանվել՝ օգտագործելով նախնական տողերից մեկըdefiնիտ 'slow' o 'fast', կամ մի քանի միլիվայրկյաններով; ավելի բարձր արժեքները ցույց են տալիս ավելի դանդաղ անիմացիաներ:
• Հետադարձ զանգի կամընտիր պարամետրը ֆունկցիա է, որը պետք է զանգել անիմացիայի ավարտից հետո:

Ստորև բերված է մեթոդի պարզ օրինակ animate() որը պատկերն իր սկզբնական դիրքից դեպի աջ 300 պիքսելով կենդանացնում է կոճակի սեղմումով:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Դուք կարող եք նաև կենդանացնել տարրի մի քանի հատկություններ միասին՝ օգտագործելով մեթոդը animate(). Բոլոր հատկությունները անիմացիոն են եղել միաժամանակ՝ առանց որևէ ուշացման:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Դուք կարող եք նաև աշխուժացնել տարրի մի քանի հատկություններ առանձին-առանձին, հերթում՝ օգտագործելով jQuery-ի կապակցման ֆունկցիան:

Հետևյալ օրինակը ցույց է տալիս հերթագրված կամ շղթայված jQuery անիմացիան, որտեղ յուրաքանչյուր անիմացիա կսկսվի տարրի նախորդ անիմացիայի ավարտից հետո: Հետագա հոդվածում կտեսնենք կապակցման գործառույթը:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

Հնարավոր է նաև definish հարաբերական արժեքներ անիմացիոն հատկությունների համար: Եթե ​​արժեքը նշված է նախածանցով += o -=, նպատակային արժեքը հաշվարկվում է գույքի ընթացիկ արժեքից նշված թիվը գումարելով կամ հանելով։

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Բացի թվային արժեքներից, յուրաքանչյուր հատկություն կարող է ընդունել տողեր 'show', 'hide' e 'toggle'. Դա շատ օգտակար կլինի այն իրավիճակում, երբ դուք պարզապես ցանկանում եք կենդանացնել սեփականությունը ներկայիս արժեքից մինչև սկզբնական արժեքը և հակառակը:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

Metodo stop()

jQuery մեթոդը stop() օգտագործվում է jQuery-ի անիմացիաների կամ էֆեկտների ընթացիկ գործարկումը դադարեցնելու համար ընտրված տարրերի վրա մինչև ավարտը:

Մեթոդի հիմնական շարահյուսությունը stop() jQuery-ն կարող է տրվել հետևյալով.

$(selector).stop(stopAll, goToEnd);

Վերոնշյալ շարահյուսության պարամետրերն ունեն հետևյալ իմաստները.

• Il կամընտիր պարամետր բուլյան stopAll, սահմանում է՝ հեռացնել հերթագրված անիմացիան, թե ոչ: Նախdefiգիշերն է false, սա նշանակում է, որ միայն ընթացիկ անիմացիան կդադարեցվի, հերթում մնացած անիմացիաները կկատարվեն ավելի ուշ։
• GoToEnd բուլյան պարամետրը ընտրովի նշում է, թե արդյոք լրացնել ընթացիկ անիմացիան անմիջապես: Նախdefiգիշերն է false.

Ահա մի պարզ օրինակ, որը ցույց է տալիս մեթոդը stop() իրական գործողություններում, որտեղ կարող եք սկսել և դադարեցնել անիմացիան կոճակի սեղմումով:

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

Ահա այս մեթոդի ևս մեկ օրինակ, որտեղ, եթե նորից սեղմեք կոճակըSlide Toggleանիմացիան սկսելուց հետո, բայց մինչ այն կավարտվի, անիմացիան անմիջապես կսկսվի պահպանված մեկնարկային կետից հակառակ ուղղությամբ:

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Անիմացիոն սավառնող էֆեկտը ստեղծելիս ամենատարածված խնդիրներից մեկը, որին կարող եք հանդիպել, հերթագրված բազմաթիվ անիմացիաներն են, երբ դուք արագ տեղադրում և հեռացնում եք մկնիկի կուրսորը: Ինչու՞ այս իրավիճակում, mouseenter որ mouseleave իրադարձությունները արագորեն հեռարձակվում են մինչև անիմացիայի ավարտը: Այս խնդրից խուսափելու և գեղեցիկ ու հարթ սավառնող էֆեկտ ստեղծելու համար կարող եք ավելացնել stop(true, true)մեթոդի շղթային, ինչպես այսպես.

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

Հիշելու

JavaScript-ի հայտարարությունները կատարվում են տող առ տող: Այնուամենայնիվ, քանի որ jQuery էֆեկտի ավարտը որոշ ժամանակ է պահանջում, հաջորդ տողի կոդը կարող է գործարկվել, մինչ նախորդ էֆեկտը դեռ աշխատում է: Որպեսզի դա տեղի չունենա, jQuery-ն ապահովում է հետ կանչելու ֆունկցիա յուրաքանչյուր էֆեկտի մեթոդի համար:

Հետ կանչի ֆունկցիան գործառույթ է, որն աշխատում է էֆեկտի ավարտից հետո: Հետ կանչելու ֆունկցիան փոխանցվում է որպես փաստարկ էֆեկտի մեթոդներին, և դրանք սովորաբար հայտնվում են որպես վերջին մեթոդի փաստարկ։ Օրինակ՝ jQuery էֆեկտի մեթոդի հիմնական շարահյուսությունը slideToggle() հետ կանչելու գործառույթով, որը կարող է սահմանվել հետևյալ կերպ.

$(selector).slideToggle(duration, callback);

Դիտարկենք հետևյալ օրինակը, որտեղ մենք տեղադրել ենք հայտարարությունները slideToggle()e alert()մեկը մյուսի կողքին. Եթե ​​փորձեք այս կոդը, ծանուցումը կհայտնվի անմիջապես անջատիչի կոճակը սեղմելուց հետո՝ չսպասելով սլայդի փոխարկման էֆեկտի ավարտին:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

Եվ ահա նախորդ օրինակի փոփոխված տարբերակը, որտեղ մենք տեղադրեցինք հայտարարությունը alert() մեթոդի համար հետ կանչելու ֆունկցիայի ներսում slideToggle(). Եթե ​​փորձեք այս կոդը, նախազգուշական հաղորդագրությունը կհայտնվի սլայդի փոխարկման էֆեկտի ավարտից հետո:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Նմանապես, դուք կարող եք defiավարտել հետ կանչի գործառույթները jQuery էֆեկտի այլ մեթոդների համար, ինչպիսիք են show(), hide(), fadeIn(), fadeOut(), animate()և այլն

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Եթե ​​փորձեք վերը նշված օրինակելի կոդը, դուք կստանաք նույն նախազգուշական հաղորդագրությունը երկու անգամ մեկ ապրանքի համար <h1> e <p>, ակտիվացնել կոճակը սեղմելուց հետո։

BlogInnovazione.it