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.*属性的默认值取自style属性，而不是CSS级联。

由于您未在其中设置right，因此默认值为""。

> "" <= 0
true

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

下次测试时：

> "100px" <= 0
false

因此，您将其设置为"0px"，然后：

> "0px" <= 0
false

您应该测试parseInt(form_pos.style.right, 10)而不是NaN值。

Answer 2

使用jQuery 更简单，更清晰的方式来实现它。

$("#action-top").click(function(){
    var signupForm    = $("#signup");
    var formPosition  = parseInt(signupForm.css("right").replace("px",''));

    if(formPosition <= 0)
      signupForm.animate({right:'100px', opacity:1},700);
    else
      signupForm.animate({right:'0px', opacity: 0},700);
});

http://jsfiddle.net/26WBd/9/

Answer 3

将您的if条件更改为此

if (form_pos.style.right == '0px' || form_pos.style.right == '')

这里是它的小提琴http://jsfiddle.net/26WBd/3/

Answer 4

第二次

（form_pos.style.right＆lt; = 0）为false，因此动画太小而无法看到。

尝试（form_pos.style.right＆lt; = 50）

脚本只能工作一次

4 个答案: