raven16
Lieutenant
- Registriert
- Nov. 2008
- Beiträge
- 580
Hallo,
leider funktionieren bei mir die gewünschten Animationen für den Back-To-Top Button nicht.
Ziel:
Ich möchte, dass der TOP-Button an einer bestimmten Stelle (Waypoint) beim Herunterscrollen durch einen Effekt (Animate.css) eingeblendet wird und beim Heraufscrollen natürlich durch einen Effekt wieder verschwindet.
Nach ein bisschen Googeln bin ich auf die folgende Lösung gestoßen und habe sie bisher erfolglos getestet.
Wenn ich "fadeOutDown" in beiden Verzweigungen auskommentiere, dann funktioniert die Animation für das Einblenden. Also bin ich ja scheinbar nicht weit vom gewünschten Ergebnis entfernt.
Ich bin für jede Hilfe sehr dankbar
leider funktionieren bei mir die gewünschten Animationen für den Back-To-Top Button nicht.
Ziel:
Ich möchte, dass der TOP-Button an einer bestimmten Stelle (Waypoint) beim Herunterscrollen durch einen Effekt (Animate.css) eingeblendet wird und beim Heraufscrollen natürlich durch einen Effekt wieder verschwindet.
Nach ein bisschen Googeln bin ich auf die folgende Lösung gestoßen und habe sie bisher erfolglos getestet.
HTML:
<script>
$('#waypoint-btn-top').waypoint(function(direction){
$('#btn-top').css('opacity', 0);
if (direction === 'down') {
$('#btn-top').addClass('animated fadeInUp');
$('#btn-top').removeClass('animated fadeOutDown');
}
else if (direction === 'up') {
$('#btn-top').addClass('animated fadeOutDown');
$('#btn-top').removeClass('animated fadeInUp');
}
});
</script>Wenn ich "fadeOutDown" in beiden Verzweigungen auskommentiere, dann funktioniert die Animation für das Einblenden. Also bin ich ja scheinbar nicht weit vom gewünschten Ergebnis entfernt.
Ich bin für jede Hilfe sehr dankbar
