1

画面をグレー表示にして、画面のどこかをクリックすると徐々に消えていきます。

私はjQueryでこのコードを持っています:

$('#clickme').on("click", function() 
{
    $('#screen').css(
    {
        'display': 'block',
        'width':$(document).width(),
        'height':$(document).height()
    });

    $('#screen').animate(
    {
        opacity: '0.7',
    }, 1000, function() 
    {
        // Animation complete.
    });
});

$("#screen").on("click", function() 
{
    $(this).animate(
    {
        'display': 'none',
        'opacity': '0'
    }, 1000, function() 
    {
        // Animation complete.
    });
});

一度は機能しますが、問題は screen.on("click") が不透明度に対して機能することですが、ディスプレイに対しては機能しません。理由がわかりません。助けてください ？

4

6 に答える 6

3

これは、 http://api.jquery.com/animate/からの display が数値ではないためです。

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。数値でないほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化することはできません

于 2013-04-24T23:23:17.740 に答える
2

APIドキュメントから：

「非数値のほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化できません」

は数値プロパティではないためdisplay: none、アニメーション化できません。代わりに、アニメーションへのコールバックとして非表示にしてみてください。

 var screen = $(this); // save a variable for the closure in the callback   
 screen.animate({ 'opacity': 0 }, 1000, function() { screen.hide(); });

opacity の値を数値の文字列ではなく、数値に変更したことにも注意してください。これは問題ではないかもしれませんが、良い習慣です =)

ソリューションを示すjsFiddleを次に示します。

于 2013-04-24T23:24:22.497 に答える
1 
Animation does not work for display: rules.

数値がないからです。

于 2013-04-24T23:23:25.067 に答える
0

あなたの問題は、表示が数値ではなく、不透明度が数値であることです。

あなたが望むことをするfadeOutを見てください：

http://api.jquery.com/fadeOut/

于 2013-04-24T23:23:31.570 に答える