Animation mit Java Script
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 JavaScript ist korrekt. Es funktioniert ja auch an sich nur nicht wie gewünscht.
Schönen Tag noch und Grüße
Der hier verwendete Code
<style>
.weg{
animation-iteration-count:1;
opacity:0;
}
.animated{
animation-fill-mode:forwards;
}
img{
height:100px;
}
</style>
<link rel="stylesheet" href="/css_webseite/bootstrap.min.css">
<link rel="stylesheet" href="/css_webseite/animate.css">
<input type="button" id="nochmalBtn" value="Nochmal!">
<br><br>
<div class="container bg-none">
<div class="row">
<div class="col-sm">
<h2><a href="planung.html">Planung</a></h2>
<a href="planung.html"><img src="/image/2.png" id="Bild-1" class="animated" data-time="1000" data-help="fadeInDown" data-toggle="tooltip" data-placement="bottom" title="1.Kapitel"></a>
</div>
<div class="col-sm">
<h2><a href="design.html">Design</a></h2>
<a href="design.html"><img src="/image/3.png" id="Bild-2" class="animated" data-time="2000" data-help="fadeInRight" data-toggle="tooltip" data-placement="bottom" title="2.Kapitel"></a>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2><a href="software.html">Software</a></h2>
<a href="software.html"><img src="/image/4.png" id="Bild-3" class="animated" data-time="3000" data-help="fadeInUp" data-help="fadeInUp" data-toggle="tooltip" data-placement="bottom" title="3.Kapitel"></a>
</div>
<div class="col-sm">
<h2><a href="testing.html">Testing</a></h2>
<a href="testing.html"><img src="/image/5.png" id="Bild-4" class="animated" data-time="4000" data-help="fadeInUp" data-toggle="tooltip" data-placement="bottom" title="4.Kapitel"></a>
</div>
<div class="col-sm">
<h2><a href="launch.html">Launch</a></h2>
<a href="launch.html"><img src="/image/6.png" id="Bild-5" class="animated" data-time="5000" data-help="fadeInBottomRight" data-toggle="tooltip" data-placement="bottom" title="5.Kapitel"></a>
</div>
</div>
</div>
<script>
but=document.getElementById('nochmalBtn');
but.addEventListener('click',function(){
start(but);
});
function start(but){
but.disabled=true;
img=document.querySelectorAll('a img.animated');
img.forEach(function(f){
f.classList.remove(f.getAttribute('data-help'));
f.classList.add('weg');
zeit=f.getAttribute('data-time');
setTimeout(function(){
helptime=f.getAttribute('data-time');
f.classList.remove('weg');
f.classList.add(f.getAttribute('data-help'));
but.value='Nochmal in '+(5-(helptime/1000))+' Sekunden';
if(helptime/1000>=5){
but.disabled=false;
}
},zeit);
});
}
start(but);
</script>