Metoderne hide og show i jQuery
Effekter giver mulighed for at animere et element,
for eksempel - skjule eller vise det jævnt. For
hver effekt findes der sine egne
jQuery-metoder. Lad os starte med metoderne
hide og
show.
Metoderne hide og show giver mulighed for
at skjule og vise elementer. Lad os se på deres funktion.
Lad os først tage følgende HTML-kode:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">tekst...</div>
CSS-koden ser sådan ud:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Lad os nu skrive Javascript-koden, ifølge hvilken
ved at klikke på knappen #hide
vil elementet blive skjult, og ved at klikke på
#show - blive vist:
$('#hide').click(function() {
$('#elem').hide();
});
$('#show').click(function() {
$('#elem').show();
});
Det er muligt at angive effektens varighed i
millisekunder (1000 millisekunder = 1 sekund).
I dette tilfælde vil effekten afspilles jævnt
i løbet af den angivne tid. Lad os angive
effektens varighed til 1 sekund
og se, hvordan effekten ændres:
$('#hide').click(function() {
$('#elem').hide(1000);
});
$('#show').click(function() {
$('#elem').show(1000);
});
Givet layout:
<p>
<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
<ol>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
</ol>
</div>
body {
font-size: 18px;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ol {
margin: 0px;
padding-left: 10px;
}
li {
list-style-type: inside;
}
div {
display: inline-block;
padding: 30px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
Gør sådan, at når der klikkes på linket med
#hide, skjules div'en, der indeholder listen, og når der klikkes på
linket med #show, vises den. For hver
effekt skal du angive en varighed på 600ms.