javascript - 脚本只工作一次

Question

这让我发疯......

我希望我的注册表单在我单击一个按钮时从页面右侧滑出，然后在我再次单击同一个按钮时滑出(类似于切换)。

第一次效果很好，但是当我第三次点击按钮再次显示表单时，没有任何反应...为什么？

这是我的头脚本:

function moveme() 
{
    var form_pos = document.getElementById('signup');
    if(form_pos.style.right <= 0)
    {
        $('#signup').animate({right:'100px', opacity:1},700);
    }
    else
    {  
        $('#signup').animate({right:'0px', opacity: 0},700);
    }
}

我身上有这个:

<a id="action-top" onclick="moveme();" href="#" class="button yellow">GAME ON!</a>
<div id="signup">MY FORM </div>

和 CSS:

#signup
{
    display:block;
    width:300px;
    height:100%;
    position:absolute;
    top:0;
    right:-300px;
    padding:30px;
    background:#eee;
    z-index:999;
    opacity:0;
}

Answer 1

.style.* 属性的默认值取自样式属性，而不是 CSS 级联。

由于您没有在此处设置正确的，因此默认值为""。

> "" <= 0
true

由于空字符串小于或等于零，因此将其设置为 "100px"

下次测试时:

> "100px" <= 0
false

所以你将它设置为"0px"，然后:

> "0px" <= 0
false

您应该改为测试 parseInt(form_pos.style.right, 10) 并特殊封装 NaN 值。