jQuery淡入效果动画问题答案

【问题标题】：jQuery fadeIn effect animation issuejQuery淡入效果动画问题
【发布时间】：2016-11-06 11:23:51
【问题描述】：

我用 jQuery 得到了这个简单的 js.erb 文件：

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

问题：
适当的 DOM 元素被附加到正确的 div 中，但不知何故，fadeIn 无法正常工作。

不仅仅是隐藏 div，追加 DOM 元素然后将其淡入，它似乎先追加，然后到淡出，然后立即再次淡入。

这是怎么回事？

【问题讨论】：

提供你想要的演示！！！

标签： javascript jquery html erb fadein

【解决方案1】：

只有数字，不是字符串

.fadeIn(500);

其他例子

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

https://jsfiddle.net/L2xewbea/

【讨论】：

【解决方案2】：

jQuery 总是可以使用

$(document).ready(function(){

工作示例

$(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>

【讨论】：

不确定这是否 100% 有帮助，不仅因为文档就绪功能可以有一个不错的快捷方式... (sitepoint.com/jquery-document-ready-plain-javascript)，还因为提问者正在查看 Rails 中的某些内容它的声音。无论是否准备好文档（jsfiddle.net/annoyingmouse/trj7cr83），我都无法复制该问题。也许我们需要更多的上下文来回答？

【解决方案3】：

Donald Wu 正确，参数必须是数字而不是字符串。

如果您想对序列进行更多控制，您可以使用 API 提供的回调函数 - 这些函数将在效果（隐藏等）完成时执行。例如：

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

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

【讨论】：

这很奇怪，因为如果我按照您的建议进行操作，它不会淡入，只会出现。
它看起来在我链接到的 jsbin 示例中工作（抱歉，如果这是“在我的机器上工作！”）。也许它是特定于浏览器的，或者发生了其他事情，涉及到其他任何 js 吗？
...并确保传递给“fadeIn”的持续时间参数是一个数字，而不是原始代码中的字符串