顯示：none在jQuery中不起作用

我想讓屏幕變灰，然後當我點擊屏幕上的任何地方時，它會逐漸消失。顯示：none在jQuery中不起作用

我在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（「點擊」）工程的透明度，但對顯示不起作用。我不明白爲什麼。請幫忙？

來源

2013-04-24 Naemy

動畫僅適用於數字。 display不採取數字，所以你需要做的是

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

首先，使其eaze至0％不透明度，然後將其刪除。

來源

2013-04-24 23:26:25 kba

謝謝！它的工作原理，它很棒。 – Naemy 2013-04-24 23:28:14

這是因爲顯示不是數字值，從：

所有動畫處理的屬性應該被動畫化以單一數值，除了下面提到;那些非數字最多屬性不能動畫使用基本的jQuery功能

來源

2013-04-24 23:23:17

Animation does not work for display: rules.

因爲它沒有一個數值。

來源

2013-04-24 23:23:25

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

你應該看看淡出，你想要做什麼：

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

來源

2013-04-24 23:23:31

從API documentation：那些非數字

「大多數屬性不能用基本的動畫效果jQuery功能「

由於display: none不是數字屬性，它不能動畫。相反，嘗試隱藏它作爲一個回調動畫：

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

還請注意，我改變不透明度值是數字，而不是用一個數值字符串。這可能沒有關係，但這是良好的做法=）

Here's a jsFiddle這表明解決方案。

來源

2013-04-24 23:24:22

顯示沒有數值，因此不能在jQuery動畫中使用。

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

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

來源

2013-04-24 23:25:28 razzak

顯示：none在jQuery中不起作用

回答

相關問題