Дно и правильное поведение на JQuery

Question

У меня есть следующие JQuery код для примера программы я работал на

$('#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*/}); 
    }); 

Вот HTML для него

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

И 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;    
} 

Теперь, что, по-видимому, нужно сделать, это переместить div.box на основе кнопки, которая отмечена галочкой. Чтобы сделать его семантическим, я использовал соответствующие позиции для каждой кнопки. Но как-то. Мне сложно понять код.

код работает, однако, всякий раз, когда я использую следующее:
Для правых и левых кнопок
{left: "-=40px"} and {left: "+=40px"} or {right: "-=40px"} and {right: "+=40px"}

вверх и вниз Кнопки
{top: "-=40px"} and {top: "+=40px"} or {bottom: "-=40px"} and {bottom: "+=40px"}

будут оценены Любое понимание на этом.

Answer 1

Quoting from W3C

Если ни «левые», ни «право» есть «авто», позиция переограничена, и один из них должен быть проигнорировано.

• Если свойство «направление» из содержащего блока «л», значение «левый» побеждает и «правый» становится -'left».

• Если «направление» из содержащего блока «РТЛ», «правый» побеждает и «левый» игнорируется.

---

Это происходит потому, что браузеры работают на ltr направления по умолчанию и right свойства игнорируются.

Рассмотрит следующие шаги:

1. Вы нажимаете на -> стрелок вправо, то div изменяется следующим образом:

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

2. Затем нажмите на < - стрелку влево, то div изменений как следует:

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

   * Нет tice - left:.. добавляется после right:...

3. Теперь нажмите -> Стрелка вправо снова,

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

   * The right:.. уменьшается -40, но left еще 0, который применяется.

В приведенном выше случае `право собственности игнорируется - Demo Fiddle.

---

Теперь, если вы переопределить ltr мимо,

body { 
    direction: rtl; 
} 

left свойство игнорируется. Demo Fiddle