Дисплей: ни один не работает в 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. 
    }); 
}); 

Он работает один раз, но проблема заключается в screen.on («щелчок») работает для непрозрачности, но не работает на дисплее. Я не понимаю почему. Пожалуйста помоги ?

Answer 1

Анимация работает только на номера. display не принимает числа, так что вам нужно сделать, это

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

Во-первых, сделать его EAZE до 0% непрозрачности, затем удалить его.

Answer 2

Это потому, что дисплей не числовое значение, от :

Все анимированные свойства должны быть оживлены к одному числовому значению, , за исключением случаев, указанных ниже; большинство свойств, которые нечисловая не могут быть анимированные, используя базовую функциональность JQuery

Answer 3

Animation does not work for display: rules. 

Поскольку она не имеет числовое значение.

Answer 4

Ваша проблема в том, что непрозрачность является числовым значением, а дисплей не является числовым.

Вы должны взглянуть на FADEOUT, что делает то, что вы хотите:

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

Answer 5

Из 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 6

Дисплей не имеет числового значения, поэтому не может использоваться в анимации jquery.

Добавить $(this).hide(); скрыть элемент, когда анимация завершена к функции обратного вызова:

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