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

这是因为 display 不是数值，来自http://api.jquery.com/animate/：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 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 回答
2

动画仅适用于数字。display不带数字，所以你需要做的是

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

首先，将其设为 0% 不透明度，然后将其移除。

于 2013-04-24T23:26:25.573 回答
1 
Animation does not work for display: rules.

因为它没有数值。

于 2013-04-24T23:23:25.067 回答
1

Display 没有数值，因此不能在 jquery 动画中使用。

在回调函数中添加$(this).hide();动画完成时隐藏元素：

$("#screen").on("click", function() 
{
    $(this).animate(
    {
        'opacity': '0'
    }, 1000, function() 
    {
        // Animation complete.
        $(this).hide();
    });
});
于 2013-04-24T23:25:28.587 回答
0

您的问题是 opacity 是一个数值，而 display 不是数字。

你应该看看做你想做的fadeOut：

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

于 2013-04-24T23:23:31.570 回答