Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

Slide functie

Als je een carroussel wilt maken op je site, moet je elementen op je site kunnen laten verschuiven. JQuery heeft deze functie voor je gereed in de slide functie. Via de slideDown() de slideUp() en de slideToggle() functie kun je elementen op je site laten schuiven.

Slide functie

De juiste notatie voor de slide functie ziet er als volgt uit:

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

In een script kan het er als volgt uitzien:

<!DOCTYPE html>
<html>
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#hoofd”).click(function(){
$(“#onderdeel”).slideToggle();
});
});
</script>
<style type=”text/css”>
#hoofd,#onderdeel {
padding: 10px;
text-align: center;
background-color: yellow;
border: solid 1px black; }
#onderdeel{
padding: 25px;
display: none; }
</style>
</head>
<body>

<div id=”hoofd”>Klik hier…</div>
<div id=”onderdeel”>Hallo….</div>

</body> </html>

In dit voorbeeld zie je hoe je een paneel kunt neerschuiven en weer terugschuiven over het scherm van je beeld. Hetgeen je neerschuift, schuift de rest van de pagina naar beneden mee. Met andere woorden, je schuift dus niets over de tekst van de site heen.

Wil je alleen iets naar beneden kunnen laten schuiven, dan gebruik je de functie slideDown() van JQuery. De bezoeker van je site is dan niet meer in staat het paneel terug te schuiven. Vandaar dat ik meteen de functie slideToggle() heb gebruikt in het voorbeeld.

Ook hier geldt dat je de snelheid van de slide functie kunt bepalen via de parameters slow, fast of milliseconde. Oefen er eens mee en kom zelf tot een goede oplossing voor jouw site.