Будет ли скрипт работать?

Question

Будет ли этот код работать? Мне нужно скрыть h2 с .hide класс после нажатия #idAnchor ссылка.

<script> 
$(document).ready(function(){ 

$("#idAnchor").click(function(){ 
    $(".hide").animate({ opacity: "hide" }, "slow"); 
}); 

}); 
</script> 

<h2 class="hide">New users:</h2> 

.... 

<div style="float: right; margin-top: 20px; "> 
    <a href="#" id="idAnchor">More users</a> 
</div> 

Answer 1

Он не будет вести себя так, как вы ожидаете, потому что эта линия:

$(".hide").animate({ opacity: "hide" }, "slow"); 

пытается задать opacity к "hide".

Номер opacity CSS property должен быть между 0 и 1. Например, 0, если вы хотите, чтобы элемент был скрыт.

$(".hide").animate({ opacity: 0 }, "slow"); 

Если вы действительно хотите взять элемент из потока, вы, вероятно, хотите, чтобы коснуться display собственности, которая есть стенография для:

$(".hide").hide("slow"); 

Answer 2

Внесите изменения в строке ниже:

$(".hide").animate({ opacity: "hide" }, "slow"); 

Измените значение непрозрачности, как это:

$(".hide").animate({ opacity: '0.4' }, "slow"); 

После этого он будет работать.

Примечание: Значение непрозрачности всегда находится между 0 и 1. оно может быть в десятичном формате, таком как 0,4, 0,5 ... и так далее.

Answer 3

Использование event.preventDefault() и opacity диапазон составляет от 0 до 1.

$("#idAnchor").click(function(event){ 
    event.preventDefault() 
    $(".hide").animate({ opacity: 0 }, "slow"); 
} 

Answer 4

Почему просто не

$(".hide").fadeTo("slow", 0); 

Демонстрация: https://jsfiddle.net/8zorc40d/