[jQuery] animate mit if bedingung funktioniert nicht

Sorc · 14.09.2011

Hallo zusammen,
Ich versuche mich gerade einem kleinen script, mit dem ich per Pfeiltasten (links und rechts) einen kleinen Balken bewegen kann. Das ganze ist mit einer IF-Abfrage begrenzt, damit man den Balken nicht aus dem Fenster schieben kann. Nach links kann er nicht weiter als left: 0; und rechts left: 440px;. Aber hier kommt das Problem. Wenn ich den Balken nach ganz links bewege und ihn dann wieder nach rechts bewege geht es nur bis left: 50px;. Ich weis absolut nicht warum das Script dann stoppt bzw. ich den Balken dann nur noch bis left: 50px; bewegen kann. Hier das Script.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <style type="text/css">
        #wrapper {
            width: 500px;
            height: 400px;
            position: relative;
            border: 1px dotted black;
        }
        
        #abar {
            position: absolute;
            bottom: 2px;
            left: 220px;
            height: 10px;
            width: 60px;
            border-radius: 5px;
            background-color: green;
        }
        </style>
        <script type="text/javascript" src="https://www.google.com/jsapi?key="></script>
        <script type="text/javascript">
        google.load("jquery", "1.6.4");
        google.load("jqueryui", "1.8.16");
        </script>
        <script type="text/javascript" src="projekte/spiele/js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function()
        {
            $(document).keypress(function(event)
            {
            //left
            if(event.keyCode == 37)
            {
                if($('#abar').css('left') > '0px')
                {
                    $('#abar').animate({'left': '-=10px'}, 0);
                }
        
            }
            //right
            if(event.keyCode == 39)
            {
                if($('#abar').css('left') < '440px')
                {
                    $('#abar').animate({'left': '+=10px'}, 0);
                }
            }
            });
            
            //test css left
            $('#abar').live('click', function(event)
            {
                alert($('#abar').css('left'));
            });
        });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="abar"></div>
        </div>
    </body>
</html>

Und bitte keine Posts mit "Wo ist der Link zum Script". Denn das ganze kann man per copy & paste schnell selber testen. Wobei ich noch anmerken muss, dass die Pfeiltasten nur im Firefox und Opera funktionieren.

Danke schonmal und liebe Grüße

Sorc

Duddle · 15.09.2011

AW: [jQuery] animate mit if bedingung funktioniert nicht

Du vergleichst zwei Strings, beispielsweise '410px' und '440px'. Dabei wird Zeichen für Zeichen der ASCII-Wert verglichen, solange die Werte gleich sind: ASCII-Wert von "4" und "4" sind gleich, ASCII-Wert von "1" ist kleiner als "4", also ist "410px" < "440px".

Ab "99px" wird das dann, wie du hoffentlich siehst, problematisch: "9" ist größer als "4", also ist "99px" größer als "440px".

Also musst / solltest du die Zahlenwerte extrahieren und vergleichen. Beispielsweise so:

HTML:

var cssLeft = $('#abar').css('left').slice(0,-2);
if(event.keyCode == 37)
{
    if(cssLeft > 0)
    {
	$('#abar').animate({'left': '-=10px'}, 0);
    }

}

Die Variable cssLeft ist dann zwar immer noch ein String, aber dieser wird automatisch geparst wenn er mit einer Number verglichen wird.

Duddle

Sorc · 15.09.2011

AW: [jQuery] animate mit if bedingung funktioniert nicht

Alles klar. Ich danke dir vielmals.