• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Finde den Fehler in jQuery....

arkadiuszpaluszek

arkadiuszpaluszek

Mitglied
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?

Code: 
<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!
 
Werbung:
Es scheint, dass die Eigenschaft "position" als solche angegeben werden muss, es funktioniert auch mit relative, sehe hier:
Code: 
<script type="text/javascript" src="../../jquery-3.2.1.js"></script>
<style>
    .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;
    }
</style>
<html>
<body>
<div class="slider_rahmen" id="slider_rahmen_1">
    <div class="slider_kugel" id="slider_kugel_1"></div>   
</div>   
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
    $("#test").animate({
        left: "+=200"
    }, 400);
    $("#slider_rahmen_1").click(function(){
        $("#slider_kugel_1").animate({
            
            left: "+=25"
        
          }, 400, function() {
            // Animation fertig
          });

    });
});


</script>

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!
 
Werbung:
Hier die Endfassung:
Code: 
<script type="text/javascript" src="../../jquery-3.2.1.js"></script>
<style>
    .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;
    }
</style>
<html>
<body>
<div class="slider_rahmen" id="slider_rahmen_1">
    <div class="slider_kugel" id="slider_kugel_1"></div>
    <input id="wert_1" type="hidden">
</div>   
</body>
</html>
<script type="text/javascript">
$(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";
              });
        }
    });
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben