jQuery Efekti

  • Picha ya kufikia ukurudisha
  • Picha ya kufikia ukuripwa

jQuery inayofanya uharibidi, utabiri, utafutaji, utafutaji wa uharibidi na uharibidi wa kuzingatia kwa uharibidi.

Tafadhali tukijifungua

Tafadhali jaribu mafanikio ya jQuery hii:

CodeW3C.com - Siti ya mafunzo ya uharibifu wa Web kikubwa

Kwenye CodeW3C.com, unaweza kujifunza mafunzo yote ya ujenzi wa tovuti yako.

Tafadhali bonyeza hapa

Mifano

jQuery hide()
Mfano wa funetu wa jQuery hide().
jQuery hide()
Mfano mwingine wa hide(). Kama iweze kuondoa sehemu ya matukio.
jQuery slideToggle()
Mfano wa mawingu ya slide panel ya kawaida.
jQuery fadeTo()
Mfano wa funetu wa jQuery fadeTo().
jQuery animate()
Mfano wa funetu wa jQuery animate().

jQuery kuzingatia na kuzonya

Kwa kutumia funetu hide() na show(), jQuery inaongoza katika kuzingatia kusimamia na kuzonya elementi ya HTML:

Mifano

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

Tafadhali tukijifungua

hide() na show() zingine zina mafanikio ya uadilifu mbili: speed na callback.

Makosa

$(selector).hide(mwendo,msaidia)
$(selector).show(mwendo,msaidia)

speed Parameta inaonekana kwa kufikia mkusanyiko. Inaweza kubadilishwa kama: "slow", "fast", "normal" au mikrosaki.

callback Parameta ni jina la funetu inayotendeka baada ya kumaliza hide au show funetu. Wewe utakubaliana na mambo mengi ya hili katika mfululizo wa mafunzo hii. callback Kwema ya thamani.

Mifano

$("button").click(function(){
$("p").hide(1000);
});

Tafadhali tukijifungua

jQuery kinaonyesha

Funetu jQuery toggle() inaiaza kwa show() au hide() funetu kusimamia hali yaonekana ya HTML elementi.

Kuondoa au kuzonya elementi ya HTML zilizohisiwa, kuzonya elementi ya HTML zilizohifadhiwa.

Makosa

$(selector).toggle(mwendo,msaidia)

speed Thamani inaweza kuwakilisha thamani zifuatavyo: "slow", "fast", "normal" au miti.

Mifano

$("button").click(function(){
$("p").toggle();
});

Tafadhali tukijifungua

callback Thamani inaonekana kama jina la programu ambalo linafanyishwa baada ya kumaliza kufanya kazi ya programu. Unavyoitafuta zaidi kuhusu thamani hii itakuwa katika mawazo yaliyotumiwa hapa chini. callback Kwema ya thamani.

jQuery kinaonyesha kuslipu - slideDown, slideUp, slideToggle

jQuery inaonyesha yafanyi kama kifaa za kuslipu

$(selector).slideDown(mwendo,msaidia)
$(selector).slideUp(mwendo,msaidia)
$(selector).slideToggle(speed,callback)

speed Thamani inaweza kuwakilisha thamani zifuatavyo: "slow", "fast", "normal" au miti.

callback Thamani inaonekana kama jina la programu ambalo linafanyishwa baada ya kumaliza kufanya kazi ya programu. Unavyoitafuta zaidi kuhusu thamani hii itakuwa katika mawazo yaliyotumiwa hapa chini. callback Kwema ya thamani.

Mfano wa slideDown()

$(".flip").click(function(){
$(".panel").slideDown();
});

Tafadhali tukijifungua

Mfano wa slideUp()

$(".flip").click(function(){
$(".panel").slideUp();
});

Tafadhali tukijifungua

Mfano wa slideToggle()

$(".flip").click(function(){
$(".panel").slideToggle();
});

Tafadhali tukijifungua

jQuery Funguo za Fade - fadeIn(), fadeOut(), fadeTo()

jQuery ina funguo za fade hizo:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed Thamani inaweza kuwakilisha thamani zifuatavyo: "slow", "fast", "normal" au miti.

Thamani katika fungsi ya fadeTo() opacity Thamani inasababisha kuwepo ya kina hadi uwezo wa kina ulioonekana.

callback Thamani inaonekana kama jina la programu ambalo linafanyishwa baada ya kumaliza kufanya kazi ya programu. Unavyoitafuta zaidi kuhusu thamani hii itakuwa katika mawazo yaliyotumiwa hapa chini. callback Kwema ya thamani.

Mfano wa fadeTo()

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Tafadhali tukijifungua

Mfano wa fadeOut()

$("button").click(function(){
$("div").fadeOut(4000);
});

Tafadhali tukijifungua

jQuery Msaada wa Kina

Inayofanya jQuery inasababisha msaada wa kina zaidi wa kuzingatia:

$(selector).animate({params},[duration],[easing],[callback])

Para kina ni paramsIna uliza CSS ya kina ya msaada. Inaweza kuwakilisha ukweli wa mitukio mingi:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

Para ya pili ni durationIna uliza wakati wa msaada wa kina. Ina wakilisha thamani zilizowakilisha: "slow", "fast", "normal" au miti.

Mfano 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Tafadhali tukijifungua

Mfano 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Tafadhali tukijifungua

Matokeo wa HTML ni kuzingatia kwa uangalifu wa kawaida, na hauwezi kuvutia.

Kwa kufikia kumvutia elementi, tafadhali wapokea CSS kwa position kuwa relative au absolute.

jQuery Efekti - kutoka kwenye ukuripwa huu

Funguo Maelezo
$(selector).hide() Kufadha elementi yaliopickwa
$(selector).show() Kushonwa elementi yaliopickwa
$(selector).toggle() Kuchagua kushonwa na kufadha elementi yaliopickwa
$(selector).slideDown() Kuzingatia juu (kushonwa) elementi yaliopickwa
$(selector).slideUp() Kuzingatia chini (kufadha) elementi yaliopickwa
$(selector).slideToggle() Kuchagua kuzingatia na kuzingatia chini elementi yaliopickwa
$(selector).fadeIn() Kuingia elementi yaliopickwa
$(selector).fadeOut() Kufadha elementi yaliopickwa
$(selector).fadeTo() Kufadha elementi yaliopickwa hadi ubaguzi wa kuzingatia
$(selector).animate() Kuendeleza uharibifu wa kielektroniki kwa elementi yaliopickwa

Kwa kufikia mawongozo yote, tafadhali nifungue kwenye Mwongozo wa jQuery Effect.

  • Picha ya kufikia ukurudisha
  • Picha ya kufikia ukuripwa