JQuery FadeIn эффект анимации вопрос

Question

Я получил этот простой файл js.erb с JQuery:

$('.hey-popup').empty().hide().append('<div>Hey Ho!</div>').fadeIn('500'); 

Проблема:
Соответствующие элементы DOM становятся приложены к правильному DIV, но почему-то FadeIn Безразлично работайте правильно.

Вместо того, чтобы просто скрывать div, добавляя элементы DOM, а затем затухая его, он, кажется, добавляется первым, а затем fadeOut, а затем снова снова исчезает.

Что происходит?

Answer 1

Только номер, а не строка

.fadeIn(500); 

Из другого примера

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#div1").fadeIn(); 
     $("#div2").fadeIn("slow"); 
     $("#div3").fadeIn(3000); 
    }); 
}); 

https://jsfiddle.net/L2xewbea/

Answer 2

Дональд Ву является правильным, параметр должен быть числом не строка.

Если вы хотите немного контролировать последовательность, вы можете использовать функции обратного вызова, которые предоставляет API, - они будут выполнены, когда эффект (скрыть и т. Д.) Будет завершен. Например:

$('.hey-popup').empty().hide(500, function() { 
    $(this).append('<div>Hey Ho!</div>').show(500); 
}); 

https://jsbin.com/hucaba/edit?html,js,output

Answer 3

JQuery всегда работает с

$ (документ) .ready (функция() {

рабочий пример

$(document).ready(function(){ 
 
$('.hey-popup').empty().hide().append('<div>Hey Ho!</div>').fadeIn('500'); 
 
})

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div class="hey-popup">my name is name</div>