3

いつも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;
}
4

2 に答える 2

4

$('#closeBtn').click(function()#quoteBtn がクリックされたときに呼び出される 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({

于 2013-04-16T22:19:17.197 に答える
0

間違っている場合は訂正してください。ただし、これを変更してみてください。

position: fixed;

position: absolute;または_position: relative;

于 2013-04-16T22:13:20.077 に答える