Question

我一直使用jQuery动画，但这次由于某种原因失败了。它会起作用我尝试在closeBtn点击后定位'$（this）.animate'，它会起作用，有点。

这是我的html的一部分（relivant部分，是的，我称之为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;

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

2 个答案: