Servus,
vielleicht kann mir ja hier nochmal jemand helfen.
Ich habe eine Animation, die mit Aufruf der Seite automatisch gestartet wird.
Jetzt habe ich einen Button erzeugt, der mir diese Animation manuell abspielen lassen kann.
Es sind fünf Bilder, die mit Slide Effekts hineinfliegen. Der Button ist zwar nach mehrmaligem Drücken funktionstüchtig, nur kommen die Bilder dann verzögert und die letzten beiden ohne Effekte.
Ich stehe gerade echt vor einem Rätsel, da ich dachte mein Java Script ist korrekt. Es funktioniert ja auch an sich nur nicht wie gewünscht.
schönen Tag noch und Grüße
Code
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.compat.css" integrity="sha256-Z12agm4mw1C2s2sXTx0wUlgmQdWqv1HCc/vgtpB0r9M=" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/4ac96a5a3c.js" crossorigin="anonymous"></script>
</head>
<script>
$(function(){
$('#nochmalBtn').click(function(){
animate('#Bild-1','fadeInDown');
return false;
});
function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 1000);
}
})
$(function(){
$('#nochmalBtn').click(function(){
animate('#Bild-2','fadeInRight');
return false;
});
function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 1600);
}
})
$(function(){
$('#nochmalBtn').click(function(){
animate('#Bild-3','fadeInUp');
return false;
});
function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 2200);
}
})
$(function(){
$('#nochmalBtn').click(function(){
animate('#Bild-4','fadeInUp');
return false;
});
function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 2800);
}
})
$(function(){
$('#nochmalBtn').click(function(){
animate('#Bild-5','fadeInBottomRight');
return false;
});
function animate(element, animation){
$(element).addClass('animated '+animation);
var wait = setTimeout(function(){
$(element).removeClass('animated '+animation);
}, 3400) ;
}
})
</script>Code
CSS:
#Bild-1 {
animation-delay: 0;
}
#Bild-2 {
animation-delay: 1s;
}
#Bild-3 {
animation-delay: 2s;
}
#Bild-4 {
animation-delay: 3s;
}
#Bild-5 {
animation-delay: 4s;
}
