JQuery, paano natin maipapatupad ang mga dynamic na epekto sa JQuery

Sa JQuery maaari kang lumikha ng mga dynamic na effect, animation at fade sa pamamagitan ng pagkilos sa mga elemento ng isang HTML page.

Sa artikulong ito makikita natin kung paano gumamit ng iba't ibang pamamaraan ng JQuery para sa pagbuo ng mga animation.

Itago at ipakita ang isang HTML na elemento

Mga pamamaraan hide() At show()

Ang paraan ng hide() ay nagtatakda lamang ng istilong inline display: none para sa mga napiling item. Sa kabaligtaran, ang show() na paraan ay nagpapanumbalik ng mga katangian ng display. 

Tingnan natin ang isang halimbawa:

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

Sa unang kaso ang talata ay nakatago kapag nag-click ka sa pindutan (hide-btn), sa pangalawang kaso ang talata ay ipinapakita kapag nag-click ka sa pindutan (show-btn).

Maaari mo ring tukuyin ang parameter ng tagal, upang i-animate ang palabas at itago ang epekto sa loob ng isang yugto ng panahon.

Maaaring tukuyin ang mga tagal gamit ang isa sa mga pre stringdefinite 'slow' o 'fast', o sa isang bilang ng mga millisecond, para sa higit na katumpakan; ang mas mataas na mga halaga ay nagpapahiwatig ng mas mabagal na mga animation.

<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>

Ang string predefinita 'fast' ay nagpapahiwatig ng tagal na 200 millisecond, habang ang string 'slow' ay nagpapahiwatig ng tagal ng 600 millisecond.

Maaari naming tukuyin ang isang function ng callback na isasagawa pagkatapos makumpleto ang pamamaraan show() o 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>

Ang paraan ng toggle

Ang paraan ng jQuery toggle() ipakita o itago ang mga item sa paraang kung ang item ay unang ipapakita, ito ay itatago; sa kabaligtaran kung nakatago, ito ay ipapakita (halos i-toggle ang visibility nito).

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

Katulad nito, maaari mong tukuyin ang parameter duration para sa pamamaraan toggle(), sa paraang mai-animate ang paglipat sa pagitan ng nakikita at nakatago, tulad ng mga pamamaraan 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>

Katulad nito, maaari mo ring tukuyin ang isang function ng callback para sa pamamaraan 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 fade effect

Mga pamamaraan fadeIn() e fadeOut()

Maaari kang gumamit ng mga pamamaraan ng jQuery fadeIn()e fadeOut() upang ipakita o itago ang mga elemento ng HTML, unti-unting pinapataas o binabawasan ang kanilang opacity at lumilikha ng isang kumukupas na epekto.

<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>

Tulad ng iba pang mga pamamaraan ng epekto ng jQuery, maaari mong opsyonal na tukuyin ang tagal o parameter ng bilis para sa mga pamamaraan fadeIn()e fadeOut(), upang makontrol ang tagal ng fade. Maaaring tukuyin ang mga tagal gamit ang isa sa mga pre stringdefinite 'slow' o 'fast', o sa isang bilang ng mga millisecond; ang mas mataas na mga halaga ay nagpapahiwatig ng mas mabagal na mga animation.

<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>

ang epekto ng mga pamamaraan fadeIn() / fadeOut() Ito ay katulad ng show() / hide(), ngunit hindi katulad ng mga pamamaraan show() / hide(), ang dating ay nagbibigay-buhay lamang sa opacity ng mga target na elemento at hindi nagbibigay-buhay sa kanilang laki.

Maaari mo ring tukuyin ang isang function ng callback upang tumakbo pagkatapos makumpleto ang mga pamamaraan 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>

Paraan fadeToggle()

Ang paraan ng jQuery fadeToggle() nagpapakita o nagtatago ng mga napiling elemento sa pamamagitan ng pag-animate ng kanilang opacity upang kung ang elemento ay unang ipapakita, ito ay mawawala; kung ito ay nakatago, ito ay maglalaho (ibig sabihin, i-toggle ang fade effect).

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

Maaari mo ring tukuyin ang panghabambuhay na parameter para sa pamamaraan fadeToggle() tungkol sa mga pamamaraan fadeIn() / fadeOut(), upang kontrolin ang tagal o bilis ng fade animation.

<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>

Ang fadeToggle() na pamamaraan ay mayroon ding kakayahang tumukoy ng isang function 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>

Paraan fadeTo()

Ang paraan ng jQuery fadeTo() ito ay katulad ng pamamaraan fadeIn(), ngunit hindi katulad ng pamamaraan fadeIn(), ang paraan fadeTo() hinahayaan kang pagsamahin ang mga elemento hanggang sa isang tiyak na antas ng opacity.

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

Ang kinakailangang parameter opacity tumutukoy sa huling opacity ng mga target na elemento na maaaring isang numero sa pagitan ng 0 at 1. Ang parameter duration o speed ito ay kinakailangan din para sa paraang ito na tumutukoy sa tagal ng animation fade.

<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>

Mga epekto sa pag-scroll

Mga pamamaraan slideUp() e slideDown()

Ang paraan ng jQuery slideUp() e slideDown() ginagamit ang mga ito upang itago o ipakita ang mga elemento ng HTML sa pamamagitan ng unti-unting pagbaba o pagtaas ng kanilang taas (ibig sabihin, pag-scroll sa kanila pataas o pababa).

<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>

Tulad ng iba pang mga pamamaraan ng jQuery effect, maaari mong opsyonal na tukuyin ang tagal o parameter ng bilis para sa mga pamamaraan slideUp() e slideDown() upang kontrolin ang tagal ng slide animation. Maaaring tukuyin ang mga tagal gamit ang isa sa mga pre stringdefinite 'slow' o 'fast', o sa isang bilang ng mga millisecond; ang mas mataas na mga halaga ay nagpapahiwatig ng mas mabagal na mga animation.

<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>

Maaari ka ring tumukoy ng callback function na ipapatupad pagkatapos makumpleto ang pamamaraan 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>

Paraan slideToggle()

Ang paraan ng jQuery slideToggle() ipakita o itago ang mga napiling elemento sa pamamagitan ng pag-animate ng kanilang taas upang kung ang elemento ay unang ipapakita, ito ay mai-scroll pataas; kung nakatago, ito ay mai-scroll pababa, ibig sabihin, magpalipat-lipat sa pagitan ng mga pamamaraan slideUp() e slideDown().

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

Katulad nito, maaari mong tukuyin ang panghabambuhay na parameter para sa pamamaraan slideToggle() Dumating 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>

Katulad nito, maaari ka ring tumukoy ng callback function para sa pamamaraan 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>

Mga epekto ng animation

Paraan animate()

Ang paraan ng jQuery animate() ito ay ginagamit upang lumikha ng mga pasadyang animation. Ang paraan animate() ay ginagamit upang i-animate ang mga numeric na katangian ng CSS, gaya ng width, height, margin, padding, opacity, top, left atbp. ngunit hindi numerical na mga katangian tulad ng color o background-color hindi sila ma-animate gamit ang basic jQuery functionality.

Ang pangunahing syntax ng pamamaraan animate() ito ay ang mga sumusunod:

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

Mga parameter ng pamamaraan animate() may mga sumusunod na kahulugan:

• Ang kinakailangang parameter ng mga katangian defitapusin ang mga katangian ng CSS upang mai-animate.
• Tinutukoy ng opsyonal na parameter ng tagal kung gaano katagal tatakbo ang animation. Maaaring tukuyin ang mga tagal gamit ang isa sa mga pre stringdefinite 'slow' o 'fast', o sa isang bilang ng mga millisecond; ang mas mataas na mga halaga ay nagpapahiwatig ng mas mabagal na mga animation.
• Ang opsyonal na parameter ng callback ay isang function na tatawagan pagkatapos makumpleto ang animation.

Nasa ibaba ang isang simpleng halimbawa ng pamamaraan animate() na nagbibigay-buhay sa isang imahe mula sa orihinal nitong posisyon sa kanan ng 300 pixels sa pag-click sa pindutan.

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

Maaari mo ring i-animate ang maraming katangian ng isang elemento nang sabay-sabay gamit ang pamamaraan animate(). Ang lahat ng mga pag-aari ay na-animate sa parehong oras nang walang anumang pagkaantala.

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

Maaari mo ring i-animate ang maramihang mga katangian ng isang elemento nang paisa-isa, sa isang queue gamit ang function ng concatenation ng jQuery.

Ang sumusunod na halimbawa ay nagpapakita ng isang naka-queued o nakakadena na jQuery animation, kung saan ang bawat animation ay magsisimula kapag nakumpleto na ang nakaraang animation sa elemento. Makikita natin ang function ng concatenation sa isang artikulo sa hinaharap.

<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>

Posible rin defitapusin ang mga kamag-anak na halaga para sa mga animated na katangian. Kung ang isang halaga ay tinukoy na may prefix += o -=, kinakalkula ang target na halaga sa pamamagitan ng pagdaragdag o pagbabawas ng tinukoy na numero mula sa kasalukuyang halaga ng property.

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

Bilang karagdagan sa mga numeric na halaga, maaaring tumanggap ng mga string ang bawat property 'show', 'hide' e 'toggle'. Ito ay magiging lubhang kapaki-pakinabang sa isang sitwasyon kung saan gusto mo lang i-animate ang property mula sa kasalukuyang halaga nito hanggang sa paunang halaga nito at vice versa.

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

Paraan stop()

Ang paraan ng jQuery stop() ay ginagamit upang ihinto ang kasalukuyang pagpapatakbo ng jQuery animation o mga epekto sa mga napiling elemento bago makumpleto.

Ang pangunahing syntax ng pamamaraan stop() Ang jQuery ay maaaring ibigay sa:

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

Ang mga parameter sa itaas na syntax ay may mga sumusunod na kahulugan:

• Il opsyonal na parameter boolean stopAll, ay tumutukoy kung aalisin o hindi ang naka-queue na animation. Ang predefigabi ay false, nangangahulugan ito na ang kasalukuyang animation lamang ang ititigil, ang natitirang mga animation sa pila ay isasagawa sa ibang pagkakataon.
• Ang boolean parameter na goToEnd ang opsyonal ay tumutukoy kung kukumpletuhin kaagad ang kasalukuyang animation. Ang predefigabi ay false.

Narito ang isang simpleng halimbawa na nagpapakita ng pamamaraan stop() sa totoong aksyon kung saan maaari mong simulan at ihinto ang animation sa pag-click sa pindutan.

<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>

Narito ang isa pang halimbawa ng pamamaraang ito kung saan kung i-click mo muli ang pindutanSlide Toggle” pagkatapos simulan ang animation ngunit bago ito makumpleto, ang animation ay agad na magsisimula sa tapat na direksyon mula sa naka-save na panimulang punto.

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

Kapag lumilikha ng animated na hover effect, ang isa sa mga pinakakaraniwang problema na maaari mong makaharap ay maraming mga animation na nakapila, kapag mabilis mong inilagay at tinanggal ang cursor ng mouse. Bakit sa ganitong sitwasyon, mouseenter ang mouseleave mabilis na pinapagana ang mga kaganapan bago makumpleto ang animation. Upang maiwasan ang problemang ito at lumikha ng maganda at makinis na hover effect, maaari kang magdagdag stop(true, true)sa chain ng pamamaraan, tulad nito:

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

Callback

Ang mga pahayag ng JavaScript ay isinasagawa sa bawat linya. Gayunpaman, dahil ang jQuery effect ay tumatagal ng ilang oras upang matapos, ang susunod na linya ng code ay maaaring tumakbo habang ang nakaraang epekto ay tumatakbo pa rin. Upang maiwasang mangyari ito, nagbibigay ang jQuery ng function ng callback para sa bawat paraan ng epekto.

Ang callback function ay isang function na tumatakbo kapag nakumpleto na ang epekto. Ang callback function ay ipinapasa bilang argumento sa mga pamamaraan ng epekto, at kadalasang lumalabas ang mga ito bilang argumento ng huling paraan. Halimbawa, ang pangunahing syntax ng jQuery effect method slideToggle() na may function ng callback na maaaring tukuyin tulad ng sumusunod:

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

Isaalang-alang ang sumusunod na halimbawa kung saan inilagay natin ang mga pahayag slideToggle()e alert()isa sa tabi ng isa. Kung susubukan mo ang code na ito, lalabas kaagad ang alerto pagkatapos i-click ang toggle button nang hindi naghihintay na makumpleto ang slide toggle effect.

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

At narito ang binagong bersyon ng nakaraang halimbawa kung saan ipinasok namin ang pahayag alert() sa loob ng isang callback function para sa pamamaraan slideToggle(). Kung susubukan mo ang code na ito, lalabas ang mensahe ng babala kapag nakumpleto na ang slide toggle effect.

<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>

Gayundin, maaari mo defitapusin ang mga function ng callback para sa iba pang mga pamamaraan ng epekto ng jQuery, tulad ng show(), hide(), fadeIn(), fadeOut(), animate(), ecc

<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>

Kung susubukan mo ang sample na code sa itaas, makakatanggap ka ng parehong mensahe ng babala nang dalawang beses sa bawat item <h1> e <p>, pagkatapos i-click ang activate button.

BlogInnovazione.it