jQuery opdrachten

Voorbeeld afwerken

Werk het voorbeeld verder af zodat alle hierboven vermelde animatie voorbeelden op één pagina met elk een eigen startknop werken (zie oplossing op het internet).

Tip: gebruik relatieve positionering.

Weergeven

Reclamebanner

We maken een geanimeerde reclamebanner op basis van de volgende HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Reclame banner</title>
  <style type="text/css">
    body {
      font-family: Verdana, Geneva, sans-serif;
    }
    #reclame th {
      color: #8b921e;
      border-bottom-width: medium;
      border-bottom-style: solid;
      border-bottom-color: #4a2f1e;
    }
    #reclamekop {
      font-size: 300%;
    }
    #reclame {
      color: #4a2f1e;
      font-size: small;
    }
  </style>
</head>
<body>
  <table border="0" id="reclame" style="position:relative;">
    <tr>
      <td width="118" height="142"><img id="reclameafbeelding" src="reclame/koffer.png" width="118" height="142" style="position:relative;" /></td>
      <td>
	<table width="100%" border="0">
	  <tr>
	    <th><span id="reclamekop" style="position:relative;">SNT</span><span id="reclamekoptekst" style="position:relative;"> haal hier uw bagage!</span></th>
	  </tr>
	  <tr>
	    <td align="center">Volwassenenonderwijs overdag en 's avonds<br />
	      Arsenaalstraat Brugge | Blankenberge</td>
	  </tr>
	</table>
      </td>
    </tr>
  </table>
</body>
</html>

Zorg dat je jQuery kunt gebruiken.

Gebruik voor de animatiesnelheid voor alle animate() methoden een variabele. Daarmee kun je later op een eenvoudige manier (de variabele een andere waarde geven) de snelheid van de animatie aanpassen.

De automatisch startende animatie bestaat achtereenvolgens uit:

Een pauze (Het ondoorzichtig maken van de tags met het id #reclamekop en #reclamekoptekst.)

Het doorzichtig maken van de tag met het id #reclamekoptekst.

Het doorzichtig maken van de tag met het id #reclamekop.
De tekst in de tag met het id #reclamekop aanpassen naar Webdesign met de opdracht:
```
$("#reclamekop").html("Webdesign");
```
De tekst in de tag met het id #reclamekoptekst verwijderen.

Het gelijktijdig ondoorzichtig maken van de tags met de id #reclamekop en #reclamekoptekst.

Het doorzichtig maken van de tag met het id #reclameafbeelding.
Het aanpassen van de reclameafbeelding naar reclame/html_logo.svg.

Het ondoorzichtig maken van de reclameafbeelding.

Pauze.

Het ondoorzichtig maken van de reclameafbeelding.
Het aanpassen van de reclameafbeelding naar reclame/css_logo.svg.

Het ondoorzichtig maken van de reclameafbeelding.

Pauze.

De hoogte van de reclameafbeelding verbergen.
Het aanpassen van de reclameafbeelding naar reclame/javascript_logo.svg.

De hoogte van de reclameafbeelding weergeven.

Pauze.

De hoogte van de reclameafbeelding verbergen.
Het aanpassen van de reclameafbeelding naar reclame/PHP_logo.svg.

De hoogte van de reclameafbeelding weergeven.

Pauze.
De reclamekoptekst 100 beeldpunten naar boven en 150 beeldpunten naar rechts verplaatsen.

De reclamekop 100 beeldpunten naar boven verplaatsen.
De reclameafbeelding 150 beeldpunten naar links verplaatsen.
In deze laatste animatieblok herstel je de oorspronkelijke situatie.
Herstart de animatie.

Weergeven