jQuery 2

In de vorige les heb je geleerd om met (event) functies te werken. Deze les leer je wat variabelen en objecten zijn en hoe je ze kunt gebruiken.

Bekijk eerst onderstaande filmpjes voor een uitleg:
- variabelen
- objecten

Opdracht

1) Zorg dat je de opdracht 2 van de vorige les (jquery 1) hebt afgemaakt.

2) Plak in de html van deze opdracht de volgende html code:
<span id="knopje">knopje</span>

<div class="test1">test1</div>
<div class="test2">test2</div>
<div class="test3">test3</div>
<div class="test4">test4</div>
<div class="test5">test5</div>
<div class="test6">test6</div>


3) Plak in de stylesheets de volgende  css code:
div {
  height: 500px;
}

.test1 { background: red; }
.test2 { background: blue; }
.test3 { background: green; }
.test4 { background: yellow; }
.test5 { background: pink; }
.test6 { background: grey; }

#knopje {
  display: inline-block;
  background-color: #E0645C;
  padding: 10px;
  border-radius: 5px;
  margin: 20px;
  font-family: helvetica;
  box-shadow: 1px 1px 3px;
  cursor: pointer;
}

#knopje:hover {
  color: white;
}


4) Zorg met jquery dat wanneer er op het knopje geklikt wordt, de pagina naar de div "test5" springt.
Gebruik hiervoor de functies offset() en scrollTop().


5) Zorg met jquery dat wanneer er op het knopje geklikt wordt, de pagina naar de div "test5" scrolled met een vertraging. Tip: gebruik hiervoor de jquery functie animate().