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

如果两个人都没有离开＆＃39;也不是正确的是＆＃39; auto＆＃39;，位置过度约束，其中一个必须被忽略。



如果＆＃39;方向＆＃39;包含块的属性是＆＃39; ltr＆＃39; ，＆＃39; left＆＃39;的值胜利和＆＃39;对＆＃39;成为 - ＆＃39;离开＆＃39;



如果＆＃39;方向＆＃39;包含块的＆＃39; rtl＆＃39; ，＆＃39; right＆＃39;胜利和＆＃39;离开＆＃39;被忽略了。

这是因为浏览器默认使用ltr 方向，并忽略right属性。

请考虑以下步骤：

点击 - ＆gt;右箭头，div更改如下：

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

然后点击＆lt; - 左箭头，div更改如下：
```
<div class="box" style="right: -40px; left: 0px;">a box</div>
```
*注意 - 在left:..属性后添加right:..。
现在点击 - ＆gt;再次右箭头，
```
<div class="box" style="right: -80px; left: 0px;">a box</div>
```
* right:..减少了-40，但left仍然是0已应用。

在上述情况下，`right属性被忽略 - Demo Fiddle 。

现在，如果您覆盖ltr by，

body  {
    direction: rtl;
}

忽略left属性。的 Demo Fiddle

jQuery的底部和右边行为

1 个答案: