jquery - 为什么我的 jQuery 动画不起作用？

Question

我一直使用 jQuery animate，但这次由于某种原因失败了。它将起作用，我尝试在 closeBtn 单击后定位“$(this).animate”，它会起作用，有点。

这是我的 html 的一部分（相关部分，是的，我已经调用了 jQuery 库）

<div id='lightBox' style="opacity:0;">
    <div id='closeBtn'>
    </div>
    <div id='lightBoxContent'>
    </div><!--lightBoxContent-->
</div><!--lightBox--> 

这是我的jQuery

$(document).ready(function()
{ 
    $('#quoteBtn').click(function()
    {
        $('#lightBox').animate({
            opacity:'1',
            height:'560px'
        }, 300, function() {
            $('#lightBoxContent').html(output);
        });


        $('#closeBtn').click(function()
        {
            //alert('click');
            $('#lightBox').animate({
                opacity:'0'
            }, 300, function() {
                //alert('first animation complete');
                $('#lightBox').animate({
                    height:'0px'
                }, 300, function() {
                    //alert('second animation complete');
                });
            });
        });
    });
});

和我的css（这并不是真正的要求，但为了安全起见，我将其包括在内

#lightBox {
    width:780px;
    background-color:white;
    position:fixed;
    margin-left:-400px;
    margin-top:-300px;
    left:50%;
    top:50%;
    z-index:9999;
    -webkit-box-shadow:  0px 0px 200px 50px ;
    box-shadow:  0px 0px 200px 50px ;
    padding:20px;
}

Answer 1

当#quoteBtn 被点击时，您想要移到$('#closeBtn').click(function()被调用的 click() 函数之外。因为它永远不会被调用，因为你不能在点击内部点击。

这是它的样子：

$(document).ready(function()
{ 
    $('#quoteBtn').click(function()
    {
        $('#lightBox').animate({
            opacity:'1',
            height:'560px'
        }, 300, function() {
            $('#lightBoxContent').html(output);
        });    
    });

    $('#closeBtn').click(function()
    {
        //alert('click');
        $('#lightBox').animate({
            opacity:'0'
        }, 300, function() {
            //alert('first animation complete');
            $('#lightBox').animate({
                height:'0px'
            }, 300, function() {
                //alert('second animation complete');
            });
        });
    });

});

更新：好的……这是第 2 部分。

您要设置$('#lightBox').animate({为$('#lightBox').stop().animate({它将继续“关闭”动画。

Answer 2

如果我错了，请纠正我，但请尝试更改：

position: fixed;

到position: absolute;或position: relative;