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

它工作一次，但问题是screen.on（“click”）适用于不透明度，但不适用于显示。我不明白为什么。请帮帮忙？

Answer 1

这是因为显示不是来自http://api.jquery.com/animate/的数字值：

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本的jQuery功能动画

Answer 2

来自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演示了解决方案。

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/

显示：none在jQuery中不起作用

6 个答案: