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>