Question

我正在从其他页面加载注册表单。负载效果很好。我想接下来当有人点击接近移动盒子并淡出雾。但是，我似乎无法让它工作，即使返回false应该阻止它进入/＃不起作用。有什么想法吗？

Jquery的

    $('.signUpLink').click(function(data) {

        var url = $(this).attr('href');

        $( '#wrap' ).append(
            $( '<section>' ).load( url , function () {
                $('.fog').fadeIn('10000');
                $('.signUpBox').animate({top: '200px'}, 400);
                })
        );

        data.preventDefault();

    });

    $('.signUpBoxClose').click(function() {
        $('.fog').fadeOut('10000');
        $('.signUpBox').animate({top: '-200px'}, 400);
        return false;       
    });

HTML

<div class="signUpBox">
    <form action="http://localhost:8888/splooth/index.php/register" method="post" accept-charset="utf-8">
        <input type="text" name="username" value="" placeholder="Username"  />
        <input type="text" name="Email" value="" placeholder="Email Address"  />
        <input type="password" name="username" value="" placeholder="Password"  />
        <input type="submit" name="submit" value="Login"  />
    </form>
    <a class="signUpBoxClose" href="#">Close</a>

</div>
<div class="fog"></div>

CSS

.signUpBox {
    position: absolute;
    top: -1000px;
    left:50%;
    margin-left:-480px;
    width: 960px;
    border: 2px solid black;
    z-index: 25;
}

.signUpBoxClose {
    position: absolute;
    top: 0;
    right: 0;
}

.fog {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.25);
    z-index: 24;
    display: none;
    top: 0;
    left: 0;
}

Answer 1

您可能是动态加载关闭按钮，对吗？ .click()事件未附加到它，因为它在DOM之后加载。

你需要使用它：

$('body').on('click', '.signUpBoxClose', function() {
    $('.fog').fadeOut(10000);
    $('.signUpBox').animate({top: 200}, 400);
    return false;       
});

或者对于较旧的jQuery版本：

$('.signUpBoxClose').live(function() {
    $('.fog').fadeOut(10000);
    $('.signUpBox').animate({top: -200}, 400);
    return false;       
});

淡入作品但淡出则不然

1 个答案: