jQuery效應

  • Edellinen sivu
  • Seuraava sivu

jQuery voi luoda piilottamista, näyttämistä, vaihtamista, liikkumista ja mukautettuja animaatioita ja muita vaikutuksia.

Kokeile itse

Kokeile tätä jQuery -efektiä:

CodeW3C.com - Edelläkävijä Web-tekniikan opastuksissa

CodeW3C.com:ssa voit löytää kaikki tarvitsemasi verkkosivuston rakentamisen opastukset.

Klikkaa tästä

Esimerkki

jQuery hide()
Näytetään yksinkertainen jQuery hide() -funktio.
jQuery hide()
Toinen hide() -esimerkki. Kuinka piilottaa osa tekstiä.
jQuery slideToggle()
Näytetään yksinkertainen slide panel -efekti.
jQuery fadeTo()
Näytetään yksinkertainen jQuery fadeTo() -funktio.
jQuery animate()
Näytetään yksinkertainen jQuery animate() -funktio.

jQuery piilottaminen ja näyttäminen

jQuery tukee HTML-elementtien piilottamista ja näyttämistä hide() ja show() -funktioiden avulla:

Esimerkki

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

Kokeile itse

Molemmat hide() ja show() -funktiot voivat ottaa kaksi valinnaisia parametreja: speed ja callback.

Syntaksi:

$(selector).hide(nope, callback)
$(selector).show(nope, callback)

speed Parametrit määrittelevät näyttämisen tai piilottamisen nopeuden. Voit asettaa seuraavat arvot: "slow", "fast", "normal" tai millisekuntia.

callback Parametrit ovat funktiot, jotka suoritetaan hide tai show -funktioiden jälkeen. Voit oppia lisää näistä ohjeiden alaosassa. callback Parametrien tietämys.

Esimerkki

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

Kokeile itse

jQuery vaihto

jQuery toggle()-funktio käyttää show() tai hide()-funktioita HTML-elementin näkyvyyden vaihtamiseen.

Piilottaa näkyvät elementit ja näyttää piilotetut elementit.

Syntaksi:

$(selector).toggle(nope, callback)

speed Parametri voi asettaa seuraavat arvot: "slow", "fast", "normal" tai millisekunnit.

Esimerkki

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

Kokeile itse

callback Parametri on funktio, joka suoritetaan, kun tämä funktio on valmis. Lisätietoja tästä oppitunnin luvuista. callback Parametrien tietämys.

jQuery liikkuvuusfunktiot - slideDown, slideUp, slideToggle

jQuery sisältää seuraavat liikkuvuusfunktiot:

$(selector).slideDown(nope, callback)
$(selector).slideUp(nope, callback)
$(selector).slideToggle(speed,callback)

speed Parametri voi asettaa seuraavat arvot: "slow", "fast", "normal" tai millisekunnit.

callback Parametri on funktio, joka suoritetaan, kun tämä funktio on valmis. Lisätietoja tästä oppitunnin luvuista. callback Parametrien tietämys.

slideDown() esimerkki

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

Kokeile itse

slideUp() esimerkki

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

Kokeile itse

slideToggle() esimerkki

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

Kokeile itse

jQuery Fade-funktiot - fadeIn(), fadeOut(), fadeTo()

jQuery:lla on seuraavat fade-funktiot:

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

speed Parametri voi asettaa seuraavat arvot: "slow", "fast", "normal" tai millisekunnit.

fadeTo()-funktiossa opacity Parametri määrittää himmennystasoa.

callback Parametri on funktio, joka suoritetaan, kun tämä funktio on valmis. Lisätietoja tästä oppitunnin luvuista. callback Parametrien tietämys.

fadeTo() esimerkki

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

Kokeile itse

fadeOut() esimerkki

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

Kokeile itse

jQuery-mukautetut animaatiot

jQuery-funktion syntaksiä käytetään luomaan mukautettuja animaatioita:

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

Keskeinen parametri on paramsMäärittää CSS-ominaisuudet, jotka tuovat mukanaan animaation. Voit asettaa useita tällaisia ominaisuuksia samanaikaisesti:

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

Toinen parametri on durationMäärittää ajan, jota käytetään animaatioihin. Asetettu arvo on: "slow", "fast", "normal" tai millisekunnit.

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

Kokeile itse

Esimerkki 2

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

Kokeile itse

HTML-elementit ovat oletusarvoisesti staattisesti sijoitettuja ja niitä ei voida siirtää.

Jos haluat, että elementti voidaan siirtää, aseta CSS:n position-ominaisuus relative tai absolute.

jQuery -tehosteet - tästä sivusta

Funktio Kuvaus
$(selector).hide() Piilota valittu elementti
$(selector).show() Näytä valittu elementti
$(selector).toggle() Vaihda (piilota ja näytä) valittua elementtiä
$(selector).slideDown() Näytä alas (näytä) valittu elementti
$(selector).slideUp() Näytä ylös (piilota) valittu elementti
$(selector).slideToggle() Vaihda valittua elementtiä ylös ja alas
$(selector).fadeIn() Näytä valittu elementti
$(selector).fadeOut() Hidasta valittua elementtiä
$(selector).fadeTo() Hidasta valittua elementtiä annetun läpinäkyvyyden arvoon
$(selector).animate() Suorita mukautettu animaatio valitulle elementille

Täydellisen viittausoppikirjan löytämiseksi vieritse jQuery Effect -viittausoppikirja.

  • Edellinen sivu
  • Seuraava sivu