jQuery淡入淡出效果只能工作一次

时间:2012-08-14 18:29:52

标签: jquery css

所以我有一个div,自动设置为在页面加载时不显示。单击特定链接时,应显示fadeIn'low',反之亦然fadeOut。

fadeIn在http请求后第一次点击时工作,但fadeOut没有(但会关闭)。 在第一次之后,整个淡化效果根本不起作用。然后它表现得好像是hide()和show()

代码:

$('#req_login, #srch_login').click(function() {
    $('#popbox, #popbox_bg').show(0); // opacity background
    $('#popbox #container').fadeIn('slow'); // actual div with content
    $("#email_alt_lgn").focus(); // first field in form

    // close popbox with escape key
    $(document).keyup(function(e) {
        if (e.keyCode == 27) { 
            $('#popbox_close').click(); // trigger close link
        }
    });
});     
$('#popbox_close').click(function() {
    $('#popbox #container').fadeOut('slow'); // actual div with content
    $('#popbox, #popbox_bg').hide(0); // opacity background
});

HTML:

// this is the part that should fadeIn() and fadeOut()
<div id="popbox" style="display: none;">
    <div id="container">
        <form method="POST" action="" name="login_form">
            <span style="float: right;"><a id="popbox_close" class="button makeCircle"     title="Sluiten of [Esc]">X</a></span>
            (... form content omitted)
        </form>
    </div>
</div>
<div id="popbox_bg" style="display: none;"></div>

// this is what should trigger the fadeIn() event
<a id="req_login">Inloggen</a><span class="pin_split_white"></span>

1 个答案:

答案 0 :(得分:1)

我认为您的问题就是这一行:“关闭”点击处理程序中的$('#popbox, #popbox_bg').hide(0); **// opacity background**

问题是在调用hide()之后(fadeOut()完成之前)会立即调用fadeOut方法。删除它,看看它是否有效。

很抱歉,如果这不能解决问题,但没有小提琴这是我能为你做的最好的。

祝你好运:)