JQuery, peb tuaj yeem siv cov teebmeem zoo li cas nrog JQuery

Nrog JQuery koj tuaj yeem tsim cov teebmeem dynamic, animations thiab ploj los ntawm kev ua haujlwm ntawm nplooj ntawv HTML.

Hauv kab lus no peb yuav pom yuav ua li cas siv JQuery sib txawv rau kev tsim cov animations.

Nkaum thiab qhia cov ntsiab lus HTML

Txoj kev hide( ) Thiab show()

Txoj kev hide() yooj yim teev cov style inline display: none rau cov khoom xaiv. Conversely, tus show() txoj kev restores cov khoom vaj tse. 

Cia peb saib ib qho piv txwv:

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

Hauv thawj kis kab lus raug muab zais thaum koj nyem rau ntawm lub pob (hide-btn), nyob rau hauv rooj plaub thib ob cov kab lus tau pom thaum koj nyem rau ntawm lub pob (show-btn).

Koj tuaj yeem hais qhia lub sijhawm ncua sijhawm, txhawm rau ua kom pom cov yeeb yam thiab zais cov nyhuv rau lub sijhawm.

Lub sijhawm ntev tuaj yeem teev tau siv ib qho ntawm cov hlua ua ntejdefinite 'slow' o 'fast', los yog nyob rau hauv ib tug xov tooj ntawm milliseconds, rau ntau dua precision; cov nqi siab dua qhia cov animations qeeb.

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

Txoj hlua predefiniam 'fast' qhia lub sijhawm ntawm 200 milliseconds, thaum txoj hlua 'slow' qhia lub sijhawm ntawm 600 milliseconds.

Peb tuaj yeem qhia qhov ua haujlwm ntawm callback yuav tsum tau ua tom qab txoj kev ua tiav show() lossis 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>

Txoj kev toggle

Txoj kev jQuery toggle() qhia los yog zais cov khoom nyob rau hauv ib txoj kev uas yog hais tias cov khoom yog xub tshwm sim, nws yuav muab zais; conversely yog muab zais, nws yuav tshwm sim (xws li toggles nws visibility).

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

Ib yam li ntawd, koj tuaj yeem qhia qhov parameter duration rau txoj kev toggle(), nyob rau hauv xws li ib txoj kev raws li animate qhov kev hloov ntawm pom thiab zais, zoo li txoj kev 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>

Ib yam li ntawd, koj tuaj yeem qhia meej txog kev ua haujlwm ntawm callback rau txoj kev 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 teebmeem

Txoj kev fadeIn() e fadeOut()

Koj tuaj yeem siv cov txheej txheem jQuery fadeIn()e fadeOut() los qhia lossis zais cov ntsiab lus HTML, maj mam nce lossis txo lawv cov opacity thiab tsim kom muaj qhov tsis zoo.

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

Zoo li lwm yam kev cuam tshuam jQuery, koj tuaj yeem xaiv tau qhia lub sijhawm lossis nrawm rau txoj hauv kev fadeIn()e fadeOut(), txhawm rau tswj lub sijhawm ntawm kev ploj mus. Lub sijhawm ntev tuaj yeem teev tau siv ib qho ntawm cov hlua ua ntejdefinite 'slow' o 'fast', los yog nyob rau hauv ib tug xov tooj ntawm milliseconds; cov nqi siab dua qhia cov animations qeeb.

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

cov nyhuv ntawm txoj kev fadeIn() / fadeOut() Nws zoo ib yam li show() / hide(), tab sis tsis zoo li cov txheej txheem show() / hide(), tus qub tsuas animate lub opacity ntawm lub hom phiaj ntsiab thiab tsis animate lawv loj.

Tsis tas li ntawd koj tuaj yeem qhia qhov ua haujlwm ntawm callback khiav tom qab cov txheej txheem tiav 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()

Txoj kev jQuery fadeToggle() qhia lossis zais cov ntsiab lus xaiv los ntawm animating lawv opacity xws li yog tias lub caij pib tshwm sim, nws yuav ploj mus; Yog tias nws tau muab zais, nws yuav ploj mus (piv txwv li toggle cov nyhuv ploj).

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

Koj tseem tuaj yeem hais qhia lub neej parameter rau txoj kev fadeToggle() raws li txoj kev fadeIn() / fadeOut(), tswj lub sij hawm los yog ceev ntawm cov animation ploj.

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

Txoj kev fadeToggle() kuj muaj peev xwm los qhia txog qhov ua haujlwm 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()

Txoj kev jQuery fadeTo() nws zoo ib yam li txoj kev fadeIn(), tab sis tsis zoo li txoj kev fadeIn(), txoj kev fadeTo() cia koj muab cov ntsiab lus mus rau ib theem ntawm opacity.

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

Qhov yuav tsum tau parameter opacity qhia txog qhov kawg opacity ntawm lub hom phiaj cov ntsiab lus uas yuav ua tau ib tug xov tooj ntawm 0 thiab 1. Parameter duration o speed Nws kuj tseem yuav tsum tau rau txoj kev no uas qhia txog lub sijhawm ntawm cov animation ploj mus.

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

Scroll cov teebmeem

Txoj kev slideUp() e slideDown()

Txoj kev jQuery slideUp() e slideDown() lawv tau siv los nkaum lossis qhia cov ntsiab lus HTML los ntawm maj mam txo lossis nce lawv qhov siab (piv txwv li scrolling lawv nce lossis nqis).

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

Zoo li lwm yam kev cuam tshuam jQuery, koj tuaj yeem xaiv tau qhia lub sijhawm lossis nrawm rau txoj hauv kev slideUp() e slideDown() tswj lub sij hawm ntawm tus swb animation. Lub sijhawm ntev tuaj yeem teev tau siv ib qho ntawm cov hlua ua ntejdefinite 'slow' o 'fast', los yog nyob rau hauv ib tug xov tooj ntawm milliseconds; cov nqi siab dua qhia cov animations qeeb.

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

Koj tuaj yeem hais qhia kom muaj nuj nqi hu rov qab los ua haujlwm tom qab ua tiav txoj kev 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()

Txoj kev jQuery slideToggle() qhia lossis zais cov ntsiab lus xaiv los ntawm animating lawv qhov siab yog li yog tias lub caij pib tshwm sim, nws yuav raug scrolled; yog tias muab zais, nws yuav raug scrolled, i.e. toggles ntawm txoj kev slideUp() e slideDown().

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

Ib yam li ntawd, koj tuaj yeem qhia qhov ntsuas lub neej rau txoj kev slideToggle() tuaj 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>

Ib yam li ntawd, koj tuaj yeem hais qhia qhov kev hu rov qab rau txoj kev 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>

Cov teebmeem Animation

Metodo animate()

Txoj kev jQuery animate() nws yog siv los tsim kev cai animations. Txoj kev animate() yog siv los animate numeric CSS zog, xws li width, height, margin, padding, opacity, top, left lwm. tab sis tsis yog tus lej zoo li color o background-color lawv tsis tuaj yeem ua animated siv jQuery functionality.

Basic syntax ntawm txoj kev animate() nws yog cov hauv qab no:

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

Txheej txheem parameter animate() muaj cov ntsiab lus hauv qab no:

• Qhov yuav tsum tau muaj parameter defiua kom tiav cov khoom CSS kom ua kom muaj zog.
• Qhov kev xaiv ncua sij hawm ntsuas qhia ntev npaum li cas cov animation yuav khiav. Lub sijhawm ntev tuaj yeem teev tau siv ib qho ntawm cov hlua ua ntejdefinite 'slow' o 'fast', los yog nyob rau hauv ib tug xov tooj ntawm milliseconds; cov nqi siab dua qhia cov animations qeeb.
• Qhov kev xaiv callback parameter yog lub luag haujlwm hu tom qab cov animation tiav.

Hauv qab no yog ib qho piv txwv yooj yim ntawm txoj kev animate() uas animates ib daim duab los ntawm nws thawj txoj hauj lwm mus rau sab xis los ntawm 300 pixels ntawm lub pob nyem.

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

Koj tuaj yeem ua kom muaj ntau yam khoom ntawm ib lub caij ua ke ib zaug siv txoj kev animate(). Tag nrho cov khoom muaj animated nyob rau tib lub sij hawm yam tsis muaj kev ncua.

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

Koj tseem tuaj yeem ua kom muaj ntau yam khoom ntawm ib qho ntawm ib qho ntawm ib tus zuj zus, hauv ib kab uas siv jQuery's concatenation muaj nuj nqi.

Cov piv txwv hauv qab no qhia tau hais tias ib qho kev sib tw los yog chained jQuery animation, qhov twg txhua qhov animation yuav pib thaum cov animation yav dhau los ntawm lub caij ua tiav. Peb yuav pom qhov sib txuas ua haujlwm hauv ib tsab xov xwm yav tom ntej.

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

Nws tseem muaj peev xwm definish txheeb ze tus nqi rau cov khoom muaj nqis. Yog hais tias tus nqi yog teev nrog ib tug prefix += o -=, lub hom phiaj tus nqi yog xam los ntawm kev ntxiv lossis rho tawm tus lej teev los ntawm tus nqi tam sim no ntawm cov cuab yeej.

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

Ntxiv nrog rau qhov muaj nuj nqis, txhua lub cuab yeej tuaj yeem txais cov hlua 'show', 'hide' e 'toggle'. Nws yuav muaj txiaj ntsig zoo nyob rau hauv qhov xwm txheej uas koj tsuas yog xav ua kom lub cuab yeej los ntawm nws cov nqi tam sim no mus rau nws tus nqi pib thiab rov ua dua.

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

Metodo stop()

Txoj kev jQuery stop() yog siv los nres tam sim no khiav jQuery animations lossis cov teebmeem ntawm cov khoom xaiv ua ntej ua tiav.

Basic syntax ntawm txoj kev stop() jQuery tuaj yeem muab nrog:

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

Cov tsis nyob rau hauv cov syntax saum toj no muaj cov ntsiab lus hauv qab no:

• Il yeem parameter boolean stopAll, qhia seb puas yuav tshem tawm cov kab ke ua yeeb yam. Lub predefinoj is false, qhov no txhais tau hais tias tsuas yog cov animation tam sim no yuav tsum raug tso tseg, qhov seem ntawm cov animations hauv kab yuav raug tua tom qab.
• Lub boolean parameter goToEnd xaiv tau qhia seb puas yuav ua kom tiav cov animation tam sim no. Lub predefinoj is false.

Ntawm no yog ib qho piv txwv yooj yim qhia txog txoj kev stop() hauv kev ua tiag tiag qhov twg koj tuaj yeem pib thiab nres cov animation ntawm lub pob nyem.

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

Nov yog lwm qhov piv txwv ntawm txoj kev no yog tias koj nyem lub pob duaSlide Toggle” tom qab pib cov animation tab sis ua ntej nws ua tiav, cov animation yuav pib tam sim ntawd nyob rau hauv qhov kev taw qhia ntawm qhov chaw pib tau txais kev cawmdim.

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

Thaum tsim cov animated hover nyhuv, ib qho ntawm cov teeb meem feem ntau koj yuav ntsib yog ntau cov animations queued, thaum koj sai sai tso thiab tshem tus nas cursor. Vim li cas, hauv qhov xwm txheej no, mouseenter gli mouseleave Cov xwm txheej raug rho tawm sai ua ntej cov animation tiav. Txhawm rau zam qhov teeb meem no thiab tsim kom muaj txiaj ntsig zoo thiab du, koj tuaj yeem ntxiv stop(true, true)mus rau txoj kev saw hlau, zoo li li ntawd:

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

callback

Cov nqe lus JavaScript raug coj los ntawm kab. Txawm li cas los xij, txij li cov nyhuv jQuery siv qee lub sijhawm los ua kom tiav, kab tom ntej tus lej yuav khiav thaum cov txiaj ntsig yav dhau los tseem ua haujlwm. Txhawm rau tiv thaiv qhov no los ntawm qhov tshwm sim, jQuery muab lub luag haujlwm hu rov qab rau txhua txoj kev cuam tshuam.

Lub callback muaj nuj nqi yog ib txoj haujlwm uas khiav thaum cov nyhuv tiav. Txoj haujlwm hu rov qab tau dhau los ua qhov kev sib cav rau cov txiaj ntsig txoj hauv kev, thiab lawv feem ntau tshwm sim raws li qhov kev sib cav kawg. Piv txwv li, lub ntsiab lus syntax ntawm jQuery effect method slideToggle() nrog rau callback muaj nuj nqi uas tau teev tseg raws li nram no:

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

Xav txog qhov piv txwv hauv qab no uas peb tau tso cov lus slideToggle()e alert()ib sab ib sab. Yog tias koj sim cov cai no, qhov kev ceeb toom yuav tshwm sim tam sim ntawd tom qab nias lub khawm toggle yam tsis tau tos rau cov nyhuv slide toggle kom tiav.

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

Thiab ntawm no yog qhov hloov kho ntawm qhov piv txwv yav dhau los uas peb tau ntxig cov lus alert() nyob rau hauv ib tug callback muaj nuj nqi rau txoj kev slideToggle(). Yog tias koj sim cov cai no, cov lus ceeb toom yuav tshwm sim thaum lub slide toggle effect tiav.

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

Ib yam li ntawd, koj tuaj yeem ua tau defiua kom tiav callback functions rau lwm yam jQuery nyhuv txoj kev, xws li show(), hide(), fadeIn(), fadeOut(), animate(), thiab lwm yam.

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

Yog tias koj sim cov qauv code saum toj no, koj yuav tau txais cov lus ceeb toom tib ob zaug ib zaug rau ib yam khoom <h1> e <p>, tom qab nyem rau ntawm lub pob qhib.

BlogInnovazione.it