JQuery, ahoana no ahafahantsika mampihatra ny fiantraikany mavitrika amin'ny JQuery

Miaraka amin'ny JQuery dia afaka mamorona vokatra mavitrika, sary mihetsika ary fades ianao amin'ny alàlan'ny hetsika amin'ny singa amin'ny pejy HTML.

Amin'ity lahatsoratra ity dia ho hitantsika ny fomba fampiasana fomba JQuery samihafa amin'ny famoronana sary mihetsika.

Afeno ary asehoy singa HTML

fomba hide() Ary show()

Ny fomba hide() dia mametraka fotsiny ny style inline display: none ho an'ny zavatra voafantina. Mifanohitra amin'izany, ny fomba fampisehoana () dia mamerina ny toetra aseho. 

Andeha isika hijery ohatra:

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

Amin'ny tranga voalohany dia miafina ny fehintsoratra rehefa manindry ny bokotra (hide-btn), amin'ny tranga faharoa dia aseho ny fehintsoratra rehefa manindry ny bokotra (show-btn).

Azonao atao ihany koa ny mamaritra ny mari-pamantarana ny faharetana, mba hanamafisana ny fampisehoana sy hanafenana ny vokany mandritra ny fe-potoana.

Ny faharetana dia azo faritana amin'ny alalan'ny iray amin'ireo tady mialohadefialina 'slow' o 'fast', na ao anatin'ny milisegondra maromaro, mba hahazoana antoka kokoa; ny soatoavina ambony dia manondro sary mihetsika miadana kokoa.

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

Ny tady predefizazavavy kely 'fast' manondro ny faharetan'ny 200 milliseconds, raha ny tady 'slow' manondro ny faharetan'ny 600 milliseconds.

Afaka mamaritra ny asan'ny callback hotanterahina rehefa vita ny fomba show() na 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>

Ny fomba toggle

Ny fomba jQuery toggle() asehoy na afeno amin'ny fomba izay raha aseho voalohany ilay entana dia hafenina; ny mifanohitra amin'izany, raha miafina izy, dia haseho (mampivadika ny fahitana azy).

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

Toy izany koa, azonao atao ny mamaritra ny parameter duration ho an'ny fomba toggle(), amin'ny fomba mamelona ny fifindrana eo amin'ny fomba hita maso sy miafina, toy ny fomba 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>

Toy izany koa, azonao atao koa ny mamaritra ny asan'ny callback ho an'ny fomba 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

fomba fadeIn() e fadeOut()

Azonao atao ny mampiasa fomba jQuery fadeIn()e fadeOut() mba hampisehoana na hanafenana singa HTML, mampitombo na mampihena tsikelikely ny tsy fahitana azy ary mamorona fiantraikany mihamalalaka.

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

Tahaka ny fomba fiasa jQuery hafa, azonao atao ny mamaritra ny faharetana na ny hafainganam-pandeha ho an'ny fomba fadeIn()e fadeOut(), mba hifehezana ny faharetan'ny fade. Ny faharetana dia azo faritana amin'ny alalan'ny iray amin'ireo tady mialohadefialina 'slow' o 'fast', na ao anatin'ny milisegondra maromaro; ny soatoavina ambony dia manondro sary mihetsika miadana kokoa.

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

ny vokatry ny fomba fadeIn() / fadeOut() Mitovy amin'ny show() / hide(), fa tsy toy ny fomba show() / hide(), ny teo aloha ihany no mamelona ny opacity amin'ireo singa kendrena ary tsy mamelona ny habeny.

Azonao atao ihany koa ny mamaritra ny function of callback mihazakazaka rehefa vita ny fomba 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()

Ny fomba jQuery fadeToggle() mampiseho na manafina ireo singa voafantina amin'ny alàlan'ny famelomana ny tsy fahitana azy ka raha aseho amin'ny voalohany ilay singa dia ho levona; raha nafenina izy io dia ho levona (izany hoe avadika ny effet fade).

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

Azonao atao ihany koa ny mamaritra ny mari-pamantarana mandritra ny androm-piainana ho an'ny fomba fadeToggle() raha ny fomba fadeIn() / fadeOut(), hifehy ny faharetana na ny hafainganam-pandehan'ny sarimiaina 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>

Ny fomba fadeToggle() ihany koa dia manana fahafahana mamaritra asa iray 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()

Ny fomba jQuery fadeTo() mitovy amin'ny fomba fadeIn(), fa tsy toy ny fomba fadeIn(), ny fomba fadeTo() mamela anao mampifangaro ny singa ho amin'ny haavon'ny opacity.

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

Ny parameter ilaina opacity mamaritra ny tsy fahampiana farany amin'ireo singa kendrena izay mety ho isa eo anelanelan'ny 0 sy 1. Ny paramètre duration o speed ilaina ihany koa io fomba io izay mamaritra ny faharetan'ny 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>

Horonan-taratasy vokatry

fomba slideUp() e slideDown()

Ny fomba jQuery slideUp() e slideDown() ampiasaina hanafenana na hampisehoana singa HTML izy ireo amin'ny alàlan'ny fampihenana na fampitomboana tsikelikely ny haavony (izany hoe ny horonan-taratasy miakatra na midina).

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

Tahaka ny fomba fiasa jQuery hafa, azonao atao ny mamaritra ny faharetana na ny hafainganam-pandeha ho an'ny fomba slideUp() e slideDown() hifehy ny faharetan'ny sarimiaina slide. Ny faharetana dia azo faritana amin'ny alalan'ny iray amin'ireo tady mialohadefialina 'slow' o 'fast', na ao anatin'ny milisegondra maromaro; ny soatoavina ambony dia manondro sary mihetsika miadana kokoa.

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

Azonao atao ihany koa ny mamaritra ny fiantsoana antso hotanterahina aorian'ny fahavitan'ny fomba 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()

Ny fomba jQuery slideToggle() asehoy na afeno ny singa voafantina amin'ny alàlan'ny famelomana ny haavony ka raha aseho amin'ny voalohany ilay singa dia hosorina miakatra; raha afenina, dia ho scroll down, izany hoe mifamadika eo amin'ny fomba slideUp() e slideDown().

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

Toy izany koa, azonao atao ny mamaritra ny mari-pamantarana mandritra ny androm-piainana ho an'ny fomba slideToggle() ho avy 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>

Toy izany koa, azonao atao ihany koa ny mamaritra ny fiasan'ny callback ho an'ny fomba 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>

Effet animation

Metodo animate()

Ny fomba jQuery animate() ampiasaina izy io mba hamoronana sary mihetsika manokana. Ny fomba animate() dia ampiasaina hamelomana ny fananana CSS nomerika, toy ny width, height, margin, padding, opacity, top, left Sns fa toetra tsy numérique toy color o background-color tsy azo alaina amin'ny fampiasana jQuery fototra izy ireo.

Ny syntax fototra amin'ny fomba animate() ireto manaraka ireto:

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

Parametera fomba animate() manana ireto dikany manaraka ireto:

• Ny parameter fananana ilaina defifarano ny fananana CSS hamelomana.
• Ny mari-pamantarana faharetan'ny safidy dia mamaritra ny halavan'ny sarimiaina. Ny faharetana dia azo faritana amin'ny alalan'ny iray amin'ireo tady mialohadefialina 'slow' o 'fast', na ao anatin'ny milisegondra maromaro; ny soatoavina ambony dia manondro sary mihetsika miadana kokoa.
• Ny mari-pamantarana callback azo atao dia asa hiantsoana rehefa vita ny animation.

Ity ambany ity ny ohatra tsotra momba ny fomba animate() izay mamelona sary avy amin'ny toerana voalohany miankavanana amin'ny 300 pixels amin'ny tsindry bokotra.

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

Azonao atao koa ny mamelona toetra maromaro amin'ny singa iray miaraka amin'ny fampiasana ny fomba animate(). Ny fananana rehetra dia nalaina tamin'ny fotoana iray tsy misy hatak'andro.

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

Azonao atao ihany koa ny mamelona toetra maromaro amin'ny singa iray tsirairay, amin'ny filaharana amin'ny alàlan'ny jQuery's concatenation function.

Ity ohatra manaraka ity dia mampiseho sarimiaina jQuery milahatra na mifatotra, izay hanombohan'ny sarimiaina tsirairay rehefa vita ny sarimiaina teo aloha amin'ilay singa. Ho hitantsika ao amin'ny lahatsoratra manaraka ny fiasan'ny concatenation.

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

Azo atao koa izany definish sanda mifandraika amin'ny fananana animé. Raha misy sanda voatondro miaraka amin'ny prefix += o -=, ny sandan'ny kendrena dia kajy amin'ny fanampiana na fanalana ny isa voatondro amin'ny sandan'ny fananana ankehitriny.

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

Ankoatra ny soatoavina isa, ny fananana tsirairay dia afaka manaiky tady 'show', 'hide' e 'toggle'. Tena ilaina tokoa izy io amin'ny toe-javatra izay tianao hampiaina ny fananana avy amin'ny sandany ankehitriny mankany amin'ny sanda voalohany ary ny mifamadika amin'izany.

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

Metodo stop()

Ny fomba jQuery stop() dia ampiasaina hampitsaharana ny fampandehanana ny sarimiaina jQuery na ny fiantraikany amin'ny singa voafantina alohan'ny hahavitana azy.

Ny syntax fototra amin'ny fomba stop() jQuery dia azo omena amin'ny:

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

Ireo masontsivana ao amin'ny syntax etsy ambony dia manana dikany manaraka ireto:

• Il paramètre tsy voatery boolean stopAll, mamaritra ny fanesorana na tsia ny sarimiaina nilahatra. Ny predefiny alina false, midika izany fa ny animation amin'izao fotoana izao ihany no hajanona, ny sisa amin'ny animation ao amin'ny filaharana dia hotanterahina any aoriana.
• Ny parameter boolean goToEnd ny safidy dia mamaritra raha hamita avy hatrany ny sary mihetsika ankehitriny. Ny predefiny alina false.

Ity misy ohatra tsotra mampiseho ny fomba stop() amin'ny hetsika tena izy izay ahafahanao manomboka sy manakana ny animation amin'ny fipihana bokotra.

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

Ity misy ohatra iray hafa amin'ity fomba ity raha tsindrio indray ny bokotraSlide Toggle” aorian'ny fanombohana ny sarimiaina fa alohan'ny hahavitana azy dia hanomboka avy hatrany amin'ny lalana mifanohitra amin'ny toerana fiaingana voatahiry ny sarimiaina.

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

Rehefa mamorona ny effet hover animée, ny iray amin'ireo olana mahazatra indrindra mety hitranga dia ny sarimiaina maromaro milahatra, rehefa apetrakao haingana sy esorinao ny cursor totozy. Nahoana, amin'ity toe-javatra ity, mouseenter les mouseleave Alefa haingana ny hetsika alohan'ny hahavitan'ny animation. Mba hisorohana an'io olana io ary hamorona vokatra hover tsara sy malefaka, azonao atao ny manampy stop(true, true)amin'ny fomba fiasa, toy izao:

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

callback

Ny fanambarana JavaScript dia tanterahina andalana isaky ny andalana. Na izany aza, satria elaela vao vita ny effet jQuery dia mety mandeha ny code andalana manaraka raha mbola mandeha ny effet teo aloha. Mba hisorohana an'izany tsy hitranga, ny jQuery dia manome fonction callback ho an'ny fomba fiasa tsirairay.

Ny fiasan'ny antso miverina dia fiasa izay mandeha rehefa vita ny vokany. Ny fiasan'ny callback dia alefa ho tohan-kevitra amin'ny fomba fiasa, ary matetika izy ireo no miseho ho toy ny tohan-kevitra farany. Ohatra, ny syntax fototra amin'ny fomba jQuery effect slideToggle() miaraka amin'ny fiasa callback izay azo faritana toy izao manaraka izao:

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

Diniho ity ohatra manaraka ity izay nametrahantsika ireo fanambarana slideToggle()e alert()iray anilan'ny iray hafa. Raha manandrana an'io kaody io ianao dia hiseho avy hatrany ny fanairana aorian'ny fipihana ny bokotra toggle nefa tsy miandry ny fiantraikan'ny toggle slide ho vita.

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

Ary eto ny dikan-teny novaina tamin'ny ohatra teo aloha izay nampiditra ny fanambarana alert() ao anatin'ny fonction callback ho an'ny fomba slideToggle(). Raha manandrana an'io kaody io ianao dia hiseho ny hafatra fampitandremana rehefa vita ny fiantraikan'ny famadihana slide.

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

Toy izany koa, azonao atao defivita ny asa antso an-tariby ho an'ny fomba fiasa jQuery hafa, toy ny show(), hide(), fadeIn(), fadeOut(), animate(), sns.

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

Raha manandrana ny kaody santionany etsy ambony ianao dia hahazo hafatra fampitandremana mitovy indroa indray mandeha isaky ny entana <h1> e <p>, rehefa avy manindry ny bokotra activate.

BlogInnovazione.it