Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

callback-function bei jQuery

Wenn die erste Funktion abgeschlossen ist, soll eine weitere aufgerufen werden. In unserem Beispiel soll nach der Animation eine Nachricht kommen, dass die Animation abgeschlossen ist (ist nur ein Beispiel für callback-Funktionen).

Bisher hatten wir:

$('#sozialbookmarks').toggle('slow');

Jetzt wollen wir nach abgeschlossener Animation eine folgende Funktion aufrufen. Dazu wird innerhalb der ersten Funktion eine weitere integriert. Hier nicht erschrecken: die Anzahl der Klammern wird unübersichtlich!

<script>
$(document).ready(function(){
  $('#sobo-einausblenden').click(function(){
    $('#sozialbookmarks').toggle('slow',
      function callback(){
        alert('Umschalten ist abgeschlossen');
      }
    );
  })
});
</script>

Kompletter Code

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>callback-function bei jQuery</title>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#socialbookmarksanzeigen {
	background-color: #00CC00;
	padding: 0.4em;
}
#sozialbookmarks {
	background-color: orange;
	padding: 0.4em;
}
</style>
<script>
$(document).ready(function(){
  $('#sobo-einausblenden').click(function(){
    $('#sozialbookmarks').toggle('slow',
      function callback(){
        alert('Umschalten ist abgeschlossen');
      }
    );
  })
});
</script>
</head>
<body>
<h1>jQuery: Elemente ein- und ausblenden</h1>
<h2>callback-function bei jQuery</h2>
<a href="https://www.html-seminar.de/" title="HTML, CSS u. jQuery lernen">
https://www.HTML-Seminar.de</a>
<p id="socialbookmarksanzeigen">
    <a href="#" id="sobo-einausblenden">Weiterempfehlen</a>
</p>
<div id="sozialbookmarks">
  <p><b>Bereich für social bookmarks</b><br>
  Hier kommen nun die üblichen Verdächtigen und Logos dazu.<br>
  Nicht vergessen, meine Seite zu bookmarken!</p>
</div>
</body>
</html>