Hallo liebe Community!
Bin unheimlich gespannt, ob mir jemand sagen kann, warum im unten gezeigtem Script die „animate“ - Funktion nicht funktioniert, während alle anderen jQuery - Funktionen problemlos laufen?
<script type="text/javascript" src="../../jquery-3.2.1.js"></script>
<style>
#test {
background-color: aqua;
width: 200px;
height: 200px;
}
</style>
<html>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#test").animate({
left: "+=200"
}, 400);
});
</script>
Danke im Voraus für eure Mühe!
Das interessiert mich jetzt auch.
Ohne es versucht zu haben: Wieso muss das Element absolut positioniert sein? Solange es nicht static ist, sollte es funktionieren.
Es scheint, dass die Eigenschaft „position“ als solche angegeben werden muss, es funktioniert auch mit relative, sehe hier:
[CODE]
.slider_rahmen {
position:relative;
width: 50px;
height: 25px;
background-color: gainsboro;
border-radius: 13px;
border: 1px solid silver;
}
.slider_kugel {
position: relative;
width: 25px;
height: 25px;
border-radius: 24px;
background-color: white;
}
[/CODE]
Natürlich ist hier der Code nicht fertig, weil das „Kügelchen“ bei erneutem Klicken nicht zurückgleitet, sondern weiter nach rechts. Das mache ich noch. Aber die animation funktioniert auch, wenn sowohl das Elternelement (slider_rahmen) als auch das animierte Element (slider_kugel) relativ positioniert sind.
Dennoch hat mir der Beitrag von sempervivum das Problem aufgezeigt - vielen Dank!
Hier die Endfassung:
[CODE]
.slider_rahmen {
position:relative;
width: 50px;
height: 25px;
background-color: gainsboro;
border-radius: 13px;
border: 1px solid silver;
}
.slider_kugel {
position: relative;
width: 25px;
height: 25px;
border-radius: 24px;
background-color: white;
}
$(document).ready(function(){
$("#slider_rahmen_1").click(function(){
var lesen = document.getElementById("wert_1").value;
if(lesen == 1) {
$("#slider_kugel_1").animate({
left: "-=25"
}, 400, function() {
document.getElementById("wert_1").value = "0";
document.getElementById("slider_rahmen_1").style.backgroundColor= "gainsboro";
});
}
else {
$("#slider_kugel_1").animate({
left: "+=25"
}, 400, function() {
document.getElementById("wert_1").value = 1;
document.getElementById("slider_rahmen_1").style.backgroundColor= "limegreen";
});
}
});
});[/CODE]