JQuery, conas is féidir linn éifeachtaí dinimiciúla a chur i bhfeidhm le JQuery

Le JQuery is féidir leat éifeachtaí dinimiciúla, beochan agus fades a chruthú trí ghníomhú ar ghnéithe leathanach HTML.

San Airteagal seo feicfimid conas modhanna éagsúla JQuery a úsáid chun beochan a ghiniúint.

Folaigh agus taispeáin eilimint HTML

modhanna hide() Agus show()

Leagann an modh hide() go simplí an stíl inlíne display: none le haghaidh míreanna roghnaithe. Os a choinne sin, déanann an modh seó() na hairíonna taispeána a athchóiriú. 

Breathnaímid ar shampla:

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

Sa chéad chás tá an mhír i bhfolach nuair a chliceálann tú ar an gcnaipe (hide-btn), sa dara cás taispeántar an mhír nuair a chliceálann tú ar an gcnaipe (show-btn).

Is féidir leat an paraiméadar ré a shonrú freisin, chun an seó a bheochan agus éifeacht a cheilt ar feadh tréimhse ama.

Is féidir réanna a shonrú trí úsáid a bhaint as ceann amháin de na réamhtheaghráindefinéata 'slow' o 'fast', nó i roinnt milleasoicindí, le haghaidh beachtas níos fearr; léiríonn luachanna níos airde beochan níos moille.

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

An teaghrán réamhdefinita 'fast' Léiríonn ré 200 milleasoicind, agus an teaghrán 'slow' léiríonn an ré 600 milleasoicind.

Is féidir linn feidhm de callback a fhorghníomhú tar éis críochnú an mhodha show() nó de 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>

An modh scoránaigh

An modh jQuery toggle() míreanna a thaispeáint nó a cheilt sa chaoi is go mbeidh sé i bhfolach má thaispeánfar an mhír ar dtús; os a choinne sin má chuirtear i bhfolach é, taispeánfar é (scorróidh sé a infheictheacht go praiticiúil).

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

Ar an gcaoi chéanna, is féidir leat an paraiméadar a shonrú duration don mhodh toggle(), sa chaoi is go mbeifear in ann an t-aistriú idir modhanna sofheicthe agus modhanna i bhfolach, cosúil le modhanna a bheochan 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>

Ar an gcaoi chéanna, is féidir leat feidhm de chuid a shonrú freisin callback don mhodh 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>

Éifeachtaí céimnithe jQuery

modhanna fadeIn() e fadeOut()

Is féidir leat modhanna jQuery a úsáid fadeIn()e fadeOut() chun eilimintí HTML a thaispeáint nó a cheilt, ag méadú nó ag laghdú de réir a chéile ar a teimhneacht agus ag cruthú éifeacht fading.

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

Cosúil le modhanna éifeachtaí jQuery eile, is féidir leat fad nó paraiméadar luais a shonrú go roghnach le haghaidh modhanna fadeIn()e fadeOut(), d'fhonn fad an céimnithe a rialú. Is féidir réanna a shonrú trí úsáid a bhaint as ceann amháin de na réamhtheaghráindefinéata 'slow' o 'fast', nó i roinnt milleasoicindí; léiríonn luachanna níos airde beochan níos moille.

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

éifeacht na modhanna fadeIn() / fadeOut() Tá sé cosúil le show() / hide(), ach murab ionann agus na modhanna show() / hide(), ní bheothaigh an chéad cheann ach teimhneacht na n-eilimintí sprice agus ní bheochan a méid.

Chomh maith leis sin is féidir leat a shonrú feidhm de callback a rith tar éis na modhanna a chomhlánú 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()

An modh jQuery fadeToggle() a thaispeánann nó a cheiltíonn gnéithe roghnaithe trína teimhneacht a bheochan ionas go laghdófar an dúil má thaispeánfar an eilimint ar dtús; má bhí sé i bhfolach, beidh sé céimnithe amach (i.e. scoránaigh an éifeacht céimnithe).

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

Is féidir leat paraiméadar saoil an mhodha a shonrú freisin fadeToggle() maidir leis na modhanna fadeIn() / fadeOut(), chun fad nó luas an bheochan céimnithe a rialú.

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

Tá an cumas ag an modh fadeToggle() feidhm a shonrú freisin 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()

An modh jQuery fadeTo() tá sé cosúil leis an modh fadeIn(), ach murab ionann agus an modh fadeIn(), an modh fadeTo() ligeann duit eilimintí a chumasc síos go leibhéal áirithe teimhneachta.

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

An paraiméadar riachtanach opacity sonraítear teimhneacht deiridh na n-eilimintí sprice ar féidir a bheith ina uimhir idir 0 agus 1. An paraiméadar duration o speed tá sé ag teastáil freisin don mhodh seo a shonraíonn fad an chéimnithe beochana.

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

Éifeachtaí scrollbharra

modhanna slideUp() e slideDown()

An modh jQuery slideUp() e slideDown() a úsáidtear chun eilimintí HTML a cheilt nó a thaispeáint trína n-airde a laghdú de réir a chéile nó a mhéadú (i.e. iad a scrollú suas nó síos).

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

Cosúil le modhanna éifeachtaí jQuery eile, is féidir leat fad nó paraiméadar luais na modhanna a shonrú go roghnach slideUp() e slideDown() chun fad an beochan sleamhnáin a rialú. Is féidir réanna a shonrú trí úsáid a bhaint as ceann amháin de na réamhtheaghráindefinéata 'slow' o 'fast', nó i roinnt milleasoicindí; léiríonn luachanna níos airde beochan níos moille.

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

Is féidir leat feidhm aisghlao a shonrú freisin le feidhmiú tar éis críochnú an mhodha 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()

An modh jQuery slideToggle() taispeáin nó folaigh gnéithe roghnaithe trína n-airde a bheochan ionas go scrollófar suas í má thaispeánfar an eilimint ar dtús; má chuirtear i bhfolach é, scrollófar síos é, i.e. scoránaigh idir modhanna slideUp() e slideDown().

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

Ar an gcaoi chéanna, is féidir leat an paraiméadar saoil a shonrú don mhodh slideToggle() Tar 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>

Ar an gcaoi chéanna, is féidir leat feidhm aisghlao a shonrú don mhodh freisin 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>

Éifeachtaí beochana

Metodo animate()

An modh jQuery animate() úsáidtear é chun beochan saincheaptha a chruthú. An modh animate() a úsáidtear chun airíonna uimhriúla CSS a bheochan, mar shampla width, height, margin, padding, opacity, top, left srl. ach is cosúil le hairíonna neamh-uimhriúla color o background-color ní féidir iad a bheochan le feidhmiúlacht bhunúsach jQuery.

Comhréir bhunúsach an mhodha animate() seo a leanas é:

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

Paraiméadair modh animate() leis na bríonna seo a leanas:

• An paraiméadar airíonna riachtanach deficríochnaigh na hairíonna CSS le beocht.
• Sonraíonn an paraiméadar ré roghnach cé chomh fada agus a bheidh an beochan ar siúl. Is féidir réanna a shonrú trí úsáid a bhaint as ceann amháin de na réamhtheaghráindefinéata 'slow' o 'fast', nó i roinnt milleasoicindí; léiríonn luachanna níos airde beochan níos moille.
• Is feidhm é an paraiméadar aisghlao roghnach le glaoch tar éis don bheochan a bheith críochnaithe.

Seo thíos sampla simplí den mhodh animate() a bheochan íomhá óna shuíomh bunaidh ar dheis faoi 300 picteilín ar chliceáil cnaipe.

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

Is féidir leat freisin airíonna iolracha dúil a bheochan le chéile ag an am céanna ag baint úsáide as an modh animate(). Bhí gach maoin beoite ag an am céanna gan aon mhoill.

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

Is féidir leat freisin airíonna iolracha eilimint a bheochan ceann ar cheann ina n-aonar, i scuaine ag baint úsáide as feidhm chomhcheangail jQuery.

Taispeánann an sampla seo a leanas beochan jQuery ciúáilte nó slabhraithe, áit a gcuirfear tús le gach beochan nuair a bheidh an bheochan roimhe seo ar an eilimint críochnaithe. Feicfimid an fheidhm chomhcheangail in alt amach anseo.

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

Is féidir freisin defiluachanna coibhneasta nish le haghaidh airíonna beoite. Má shonraítear luach le réimír += o -=, ríomhtar an spriocluach tríd an uimhir shonraithe a shuimiú nó a dhealú ó luach reatha na maoine.

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

Chomh maith le luachanna uimhriúla, is féidir le gach airí glacadh le teaghráin 'show', 'hide' e 'toggle'. Beidh sé an-úsáideach i gcás nach bhfuil uait ach an mhaoin a bheochan óna luach reatha go dtí a luach tosaigh agus vice versa.

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

Metodo stop()

An modh jQuery stop() a úsáidtear chun stop a chur le beochan jQuery nó éifeachtaí ar eilimintí roghnaithe a rith sula gcríochnaítear iad.

Comhréir bhunúsach an mhodha stop() Is féidir jQuery a thabhairt le:

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

Tá na bríonna seo a leanas ag na paraiméadair sa chomhréir thuas:

• Il paraiméadar roghnach stopallán boolean, sonraítear cé acu a bhainfear nó nach mbainfear an bheochan ciúáilte. An réamhdefinite is false, ciallaíonn sé seo nach stopfar ach an beochan reatha, déanfar an chuid eile de na beochana sa scuaine a fhorghníomhú níos déanaí.
• GoToEnd an paraiméadar Boole sonraíonn roghnach ar cheart an beochan reatha a chomhlánú láithreach. An réamhdefinite is false.

Seo sampla simplí a léiríonn an modh stop() i ngníomh fíor áit ar féidir leat tosú agus stop a chur leis an beochan ar cliceáil an cnaipe.

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

Seo sampla eile den mhodh seo má chliceálann tú an cnaipe arísSlide Toggle” tar éis an beochan a thosú ach sula gcríochnóidh sé, tosóidh an bheochan láithreach sa treo eile ón bpointe tosaithe a shábháiltear.

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

Agus an éifeacht ainrithe bheoite á cruthú agat, ceann de na fadhbanna is coitianta a d’fhéadfadh teacht ort ná beochan iolracha a bheith ciúáilte, nuair a shuíonn tú agus nuair a bhainfidh tú an cúrsóir luiche. Cén fáth, sa chás seo, mouseenter gli mouseleave cuirtear tús le himeachtaí go tapa sula gcríochnaítear an beochan. Chun an fhadhb seo a sheachaint agus éifeacht hover deas agus réidh a chruthú, is féidir leat a chur leis stop(true, true)leis an slabhra modha, mar sin:

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

Thug an

Déantar ráitis JavaScript a fhorghníomhú líne ar líne. Mar sin féin, ós rud é go dtógann an éifeacht jQuery roinnt ama le críochnú, d'fhéadfadh cód an chéad líne eile a bheith ag rith agus an éifeacht roimhe seo fós ag rith. Chun é seo a chosc, soláthraíonn jQuery feidhm aisghlao do gach modh éifeachta.

Is feidhm í feidhm aisghlao a ritheann nuair a bhíonn an éifeacht críochnaithe. Ritear an fheidhm aisghlao mar argóint do mhodhanna na héifeachta, agus de ghnáth bíonn siad le feiceáil mar an argóint modha deiridh. Mar shampla, comhréir bhunúsach an mhodh éifeacht jQuery slideToggle() le feidhm aisghlao is féidir a shonrú mar seo a leanas:

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

Smaoinigh ar an sampla seo a leanas den áit a bhfuil na ráitis curtha againn slideToggle()e alert()ceann in aice leis an gceann eile. Má dhéanann tú iarracht an cód seo, beidh an foláireamh le feiceáil díreach tar éis cliceáil ar an gcnaipe scoránaigh gan fanacht leis an éifeacht scoránaigh sleamhnáin a chur i gcrích.

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

Agus seo é an leagan modhnaithe den sampla roimhe seo inar chuireamar isteach an ráiteas alert() taobh istigh d'fheidhm aisghlao don mhodh slideToggle(). Má bhaineann tú triail as an gcód seo, beidh an teachtaireacht rabhaidh le feiceáil nuair a bheidh an éifeacht scoránaigh sleamhnáin críochnaithe.

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

Mar an gcéanna, is féidir leat defifeidhmeanna aisghlao a chríochnú do na modhanna éifeachta jQuery eile, mar shampla show(), hide(), fadeIn(), fadeOut(), animate(), srl.

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

Má bhaineann tú triail as an gcód samplach thuas, gheobhaidh tú an teachtaireacht rabhaidh chéanna faoi dhó uair amháin in aghaidh na míre <h1> e <p>, tar éis cliceáil ar an gcnaipe gníomhachtaithe.

BlogInnovazione.it