unten und rechts Verhalten auf jQuery

Question

Ich habe die folgende jQuery-Code für ein Beispielprogramm I wurde auf

Arbeits

$('#left').click(function(){ 
     $('.box').animate({ 
      left: "-=40px", 
     }, function(){/* End of Animation*/}); 
    }); 

    $('#right').click(function(){ 
     $('.box').animate({ 
      right: "-=40px", 
     }, function(){ /* End of Animation*/}); 
    }); 

    $('#up').click(function(){ 
     $('.box').animate({ 
      top: "-=40px", 
     }, function(){/* End of Animation*/}); 
    }); 

    $('#down').click(function(){ 
     $('.box').animate({ 
      bottom: "-=40px", 
     }, function(){ /* End of Animation*/}); 
    }); 

Hier ist der HTML-Code für sie

<div class="box">a box</div> 

    <div id="navArrows"> 
     <button id="left" class="navigationArrow">&larr;</button> 
     <button id="up" class="navigationArrow">&uarr;</button> 
     <button id="right" class="navigationArrow">&rarr;</button> 
     <button id="down" class="navigationArrow">&darr;</button> 
    </div> 

Und die CSS

#navArrows { 
    position: relative; 
    width: 150px; 
    height: 150px; 
    margin: 100px auto 0; 
    background: #333; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    padding: 20px; 
} 

.navigationArrow { 
    width: 50px; 
    height: 50px; 
    line-height: 50px; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    background: white; 
    color: #222; 
} 

#up { 
    left: 50%; 
    margin-left: -25px; 
} 

#left, #right { 
    top: 50%; 
    margin-top: -25px; 
} 

#right { 
    right: 20px; 
    left: inherit; 
} 

#down { 
    bottom: 20px; 
    top: inherit; 
    left: 50%; 
    margin-left: -25px; 
} 

.box { 
    height: 100px; 
    width: 100px; 
    background: #a7f; 
    color: white; 
    border: solid 4px #a1f; 
    line-height: 100px; 
    margin: 100px auto 0; 
    opacity: 0.5;   
    position: relative;    
} 

Nun, was dies tun soll, ist das Verschieben der div.box basierend auf der Schaltfläche, die angekreuzt ist. Um es semantisch zu machen, habe ich die entsprechenden Positionen für jeden Knopf-Tick benutzt. Aber irgendwie. Es fällt mir schwer, den Code zu verstehen.

Der Code funktioniert jedoch, wenn ich folgendes verwenden:
für Rechts- und Links-Tasten
{left: "-=40px"} and {left: "+=40px"} or {right: "-=40px"} and {right: "+=40px"}

für Up- und Down-Tasten
{top: "-=40px"} and {top: "+=40px"} or {bottom: "-=40px"} and {bottom: "+=40px"}

Einsicht auf diese geschätzt wird.

Answer 1

Quoting from W3C

Wenn weder ‚links‘ noch ‚rechts‘ ist ‚auto‘ wird die Position über versteift, und einer von ihnen hat ignoriert werden.

• Wenn die ‚Richtung‘ Eigenschaft des umschließenden Blocks ist ‚LTR‘, der Wert von ‚links‘ gewinnt und ‚rechts‘ wird -'left‘.

• Wenn ‚Richtung‘ des umschließenden Blocks ist ‚rtl‘, ‚rechts‘ gewinnt und ‚links‘ wird ignoriert.

---

Dies liegt daran, dass die Browser auf ltr Richtung als Standard arbeiten und right Eigenschaft ignoriert.

Betrachten Sie diese Schritte:

1. Sie klicken auf -> Pfeil nach rechts, um die div ändert sich wie folgt:

   <div class="box" style="right: -40px;">a box</div> 
   

2. Dann klicken Sie auf < - Pfeil nach links, die div Änderungen folgt:

   <div class="box" style="right: -40px; left: 0px;">a box</div> 
   

   * Nein Tice - left:.. ist nach right:.. Eigenschaft hinzugefügt.

3. Jetzt klicken Sie auf -> wieder Pfeil nach rechts,

   <div class="box" style="right: -80px; left: 0px;">a box</div> 
   

   * Die right:.. von -40 reduziert wird, aber die left ist noch 0, die angewendet wird.

Im obigen Fall die `richtige Eigenschaft wird ignoriert - Demo Fiddle.

---

Nun, wenn Sie die ltr durch außer Kraft setzen,

body { 
    direction: rtl; 
} 

die left Eigenschaft ignoriert. Demo Fiddle