顯示：沒有在jQuery中不起作用

Question

我想使屏幕變灰，然后在我單擊屏幕上的任意位置時使其逐漸消失。

我在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.
    });
});

它可以工作一次，但是問題是屏幕。on（“ click”）適用於不透明性，但不適用於顯示。 我不明白為什么。 請幫忙 ？

Answer 1

這是因為顯示不是來自http://api.jquery.com/animate/的數字值：

除非另有說明，否則所有動畫屬性都應設置為單個數值。 大多數非數字屬性不能使用基本的jQuery功能設置動畫

Answer 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(); });

還要注意，我將不透明度的值更改為數字，而不是具有數字值的字符串。 這可能無關緊要，但這是一個好習慣=）

這是一個演示解決方案的jsFiddle 。

Answer 3

動畫僅適用於數字。 display不帶數字，所以您需要做的是

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

首先，使其不透明度為0％， 然后將其移除。

Answer 4

Animation does not work for display: rules.

因為它沒有數字值。

Answer 5

顯示沒有數值，因此無法在jquery動畫中使用。

添加$(this).hide(); 在動畫完成回調函數時隱藏元素：

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

Answer 6

您的問題是不透明度是一個數字值，而顯示不是數字。

您應該看一下執行所需操作的fadeOut：

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