JQuery, ta yaya za mu iya aiwatar da tasiri mai ƙarfi tare da JQuery

Tare da JQuery zaku iya ƙirƙirar tasiri mai ƙarfi, rayarwa da fade ta yin aiki akan abubuwan shafin HTML.

A cikin wannan labarin za mu ga yadda ake amfani da hanyoyin JQuery daban-daban don samar da rayarwa.

Ɓoye ku nuna abin HTML

Hanyar hide() Kuma show()

Hanyar ɓoye() kawai tana saita salon layi display: none don abubuwan da aka zaɓa. Sabanin haka, hanyar nuna() tana mayar da kaddarorin nuni. 

Bari mu ga misali:

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

A cikin yanayin farko sakin layi yana ɓoye lokacin da ka danna maɓallin (hide-btn), a cikin akwati na biyu ana nuna sakin layi lokacin da ka danna maɓallin (show-btn).

Hakanan zaka iya ƙididdige sigina na tsawon lokaci, don raya nunin da ɓoye tasirin na wani ɗan lokaci.

Za a iya ƙayyade tsawon lokaci ta amfani da ɗaya daga cikin igiyoyin da aka rigayadefia 'slow' o 'fast', ko a cikin adadin millise seconds, don mafi girman daidaito; mafi girma dabi'u suna nuna raye-raye a hankali.

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

Kirtani predefinita 'fast' yana nuna tsawon mil 200 seconds, yayin da kirtani 'slow' yana nuna tsawon miliyon 600.

Za mu iya ƙayyade aikin callback da za a kashe bayan kammala hanyar show() ko 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>

Hanyar juyawa

Hanyar jQuery toggle() nuna ko ɓoye abubuwa ta yadda idan aka fara baje kayan abin za a ɓoye; Akasin haka idan an ɓoye, za a nuna shi (a zahiri yana jujjuya ganuwansa).

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

Hakazalika, zaku iya tantance siga duration don hanyar toggle(), ta hanyar da za a rayar da canji tsakanin bayyane da boye, kamar hanyoyin 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>

Hakazalika, zaka iya kuma ƙayyade aikin callback don hanyar 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 effects

Hanyar fadeIn() e fadeOut()

Kuna iya amfani da hanyoyin jQuery fadeIn()e fadeOut() don nunawa ko ɓoye abubuwan HTML, a hankali suna ƙaruwa ko rage girman su da haifar da faɗuwa.

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

Kamar sauran hanyoyin tasirin jQuery, za ka iya ba da zaɓin ƙididdige tsawon lokaci ko siginar sauri don hanyoyin fadeIn()e fadeOut(), don sarrafa tsawon lokacin fade. Za a iya ƙayyade tsawon lokaci ta amfani da ɗaya daga cikin igiyoyin da aka rigayadefia 'slow' o 'fast', ko a cikin adadin millise seconds; mafi girma dabi'u suna nuna raye-raye a hankali.

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

tasirin hanyoyin fadeIn() / fadeOut() Yana kama da show() / hide(), amma sabanin hanyoyin show() / hide(), na farko ne kawai ke rayar da duhun abubuwan abubuwan da aka yi niyya kuma ba sa raya girmansu.

Hakanan zaka iya tantance aikin callback don gudu bayan kammala hanyoyin 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>

hanyar fadeToggle()

Hanyar jQuery fadeToggle() yana nunawa ko ɓoye abubuwan da aka zaɓa ta hanyar rayar da rashin fahimta ta yadda idan aka fara nuna sinadarin, zai shuɗe; idan an boye shi, zai dushe (wato kunna tasirin fade).

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

Hakanan zaka iya ƙayyade ma'aunin rayuwa don hanyar fadeToggle() amma ga hanyoyin fadeIn() / fadeOut(), don sarrafa tsawon lokaci ko saurin 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>

Hanyar fadeToggle() kuma tana da ikon tantance aiki 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>

hanyar fadeTo()

Hanyar jQuery fadeTo() yayi kama da hanyar fadeIn(), amma sabanin hanyar fadeIn(), Hanyar fadeTo() yana ba ku damar haɗa abubuwa ƙasa zuwa wani matakin rashin fahimta.

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

Sigar da ake buƙata opacity Yana ƙayyadad da rashin daidaituwa na ƙarshe na abubuwan da aka yi niyya wanda zai iya zama lamba tsakanin 0 da 1. Siga duration o speed Hakanan ana buƙatar wannan hanyar wacce ke ƙayyade tsawon lokacin faɗuwar motsin rai.

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

Gungurawa tasirin

Hanyar slideUp() e slideDown()

Hanyar jQuery slideUp() e slideDown() ana amfani da su don ɓoye ko nuna abubuwan HTML ta hanyar raguwa ko ƙara tsayin su a hankali (watau gungurawa sama ko ƙasa).

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

Kamar sauran hanyoyin tasirin jQuery, za ka iya ba da zaɓin ƙididdige tsawon lokaci ko siginar sauri don hanyoyin slideUp() e slideDown() don sarrafa tsawon lokacin raye-rayen nunin faifai. Za a iya ƙayyade tsawon lokaci ta amfani da ɗaya daga cikin igiyoyin da aka rigayadefia 'slow' o 'fast', ko a cikin adadin millise seconds; mafi girma dabi'u suna nuna raye-raye a hankali.

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

Hakanan zaka iya tantance aikin dawo da kira don aiwatarwa bayan kammala hanyar 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>

hanyar slideToggle()

Hanyar jQuery slideToggle() nuna ko ɓoye abubuwan da aka zaɓa ta hanyar raya tsayin su ta yadda idan aka fara nuna sinadarin, za a gungurawa sama; idan an boye, za a gungurawa ƙasa, watau juyawa tsakanin hanyoyin slideUp() e slideDown().

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

Hakazalika, zaku iya ƙayyade ma'aunin rayuwa don hanyar slideToggle() zo 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>

Hakazalika, zaka iya kuma saka aikin dawo da kira don hanyar 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>

Tasirin motsin rai

hanyar animate()

Hanyar jQuery animate() ana amfani da shi don ƙirƙirar rayarwa na al'ada. Hanyar animate() ana amfani da shi don raya kaddarorin CSS masu lamba, kamar width, height, margin, padding, opacity, top, left da dai sauransu. amma kaddarorin marasa adadi kamar color o background-color ba za a iya raya su ta amfani da ainihin aikin jQuery ba.

Ma'anar asali na hanyar animate() shi ne kamar haka:

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

Siffofin hanyoyin animate() suna da ma'anoni kamar haka:

• Sigar kaddarorin da ake buƙata definishes da CSS Properties zuwa rayarwa.
• Ma'auni na zaɓi na zaɓi yana ƙayyadaddun tsawon lokacin motsin zai gudana. Za a iya ƙayyade tsawon lokaci ta amfani da ɗaya daga cikin igiyoyin da aka rigayadefia 'slow' o 'fast', ko a cikin adadin millise seconds; mafi girma dabi'u suna nuna raye-raye a hankali.
• Sigar mayar kira na zaɓin aiki ne don kira bayan an gama raye-raye.

Da ke ƙasa akwai misali mai sauƙi na hanyar animate() wanda ke rayar da hoto daga ainihin matsayinsa zuwa dama da pixels 300 akan danna maballin.

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

Hakanan zaka iya rayar da kaddarorin abubuwa da yawa tare a lokaci ɗaya ta amfani da hanyar animate(). Dukkan kaddarorin an raya su a lokaci guda ba tare da wani bata lokaci ba.

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

Hakanan zaka iya rayar da kaddarorin abubuwa da yawa ɗaya bayan ɗaya daban-daban, a cikin jerin gwano ta amfani da aikin haɗin gwiwar jQuery.

Misalin da ke gaba yana nuna wasan kwaikwayo na jQuery da aka yi layi ko ɗaure, inda kowane raye-raye zai fara da zarar an gama wasan kwaikwayo na baya akan kashi. Za mu ga aikin haɗakarwa a cikin labarin nan gaba.

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

Hakanan yana yiwuwa definish dangi dabi'u don mai rai Properties. Idan an ƙayyade ƙima tare da prefix += o -=, ana ƙididdige ƙimar manufa ta ƙara ko rage ƙayyadadden lamba daga ƙimar kadarorin na yanzu.

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

Baya ga ƙimar lambobi, kowace dukiya na iya karɓar kirtani 'show', 'hide' e 'toggle'. Zai zama da amfani sosai a cikin yanayin da kawai kuke son raya kayan daga darajarta na yanzu zuwa ƙimarta ta farko da akasin haka.

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

hanyar stop()

Hanyar jQuery stop() ana amfani da shi don dakatar da gudana a halin yanzu jQuery rayarwa ko tasiri akan abubuwan da aka zaɓa kafin kammalawa.

Ma'anar asali na hanyar stop() Ana iya ba da jQuery tare da:

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

Ma'auni a cikin ma'anar da ke sama suna da ma'anoni masu zuwa:

• Il siga na zaɓin boolean stopAll, yana ƙayyadaddun ko cire wasan kwaikwayo na jere ko a'a. The pre-darajadefinit ni false, wannan yana nufin cewa kawai za a dakatar da wasan kwaikwayo na yanzu, sauran abubuwan da ke cikin layi za a aiwatar da su daga baya.
• Ma'aunin boolean goToEnd na zaɓi yana ƙayyadaddun ko don kammala rayarwa na yanzu nan da nan. The pre-darajadefinit ni false.

Ga misali mai sauƙi wanda ke nuna hanyar stop() a cikin ainihin aikin inda zaku iya farawa da dakatar da rayarwa akan maballin danna.

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

Ga wani misali na wannan hanyar inda idan ka sake danna maɓallinSlide Toggle” bayan fara wasan kwaikwayo amma kafin ya kamala, nan da nan za a fara wasan kwaikwayo a sabanin inda aka ajiye.

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

Lokacin ƙirƙirar tasirin motsi mai rai, ɗayan matsalolin gama gari da za ku iya fuskanta shine raye-raye da yawa da aka yi layi, lokacin da kuka yi sauri da cire siginan linzamin kwamfuta. Me ya sa a cikin wannan hali. mouseenter gli mouseleave Ana harba abubuwan da suka faru da sauri kafin wasan kwaikwayo ya ƙare. Don guje wa wannan matsala kuma ƙirƙirar sakamako mai kyau da santsi, zaku iya ƙarawa stop(true, true)zuwa tsarin tsarin, kamar haka:

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

callback

Ana aiwatar da maganganun JavaScript layi ta layi. Koyaya, tunda tasirin jQuery yana ɗaukar ɗan lokaci don gamawa, lambar layi ta gaba zata iya gudana yayin da tasirin baya yana gudana. Don hana wannan daga faruwa, jQuery yana ba da aikin sake kira ga kowace hanyar tasiri.

Aikin dawo da kira aiki ne da ke gudana da zarar tasirin ya cika. Ana wuce aikin dawo da kira azaman hujja zuwa hanyoyin tasirin, kuma yawanci suna bayyana azaman hujjar hanya ta ƙarshe. Misali, asali na asali na hanyar tasirin jQuery slideToggle() tare da aikin dawo da kira wanda za'a iya ƙayyade kamar haka:

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

Yi la'akari da misalin da ke gaba inda muka sanya maganganun slideToggle()e alert()daya gefen daya. Idan kun gwada wannan lambar, faɗakarwar za ta bayyana nan da nan bayan danna maɓallin juyawa ba tare da jiran tasirin jujjuyawar nunin faifai ba.

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

Ga kuma gyarar misalin da ya gabata inda muka shigar da maganar alert() cikin aikin dawo da kira don hanyar slideToggle(). Idan kun gwada wannan lambar, saƙon gargaɗin zai bayyana da zarar an gama tasirin jujjuyawar faifai.

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

Hakanan zaka iya definite ayyukan dawo da kira don wasu hanyoyin tasirin jQuery, kamar show(), hide(), fadeIn(), fadeOut(), animate(), da dai sauransu

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

Idan kun gwada lambar samfurin da ke sama, zaku sami saƙon gargaɗi iri ɗaya sau biyu sau ɗaya akan kowane abu <h1> e <p>, bayan danna maɓallin kunnawa.

BlogInnovazione.it