显示：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中不起作用

回答

相关问题