jquery 从函数加载时 appendTo 效果淡出 div

Question

我一直尝试使用这个小脚本添加 HTML 内容，但是我无法在打开时显示动画并动态创建此 div

function add(id)
{
var holdyDiv=jQuery("<div>Hello"+id+"</div>");

holdyDiv.appendTo('body').fadeIn(3000);
}


<a onclick="add('test');">OPEN</a>

不过我想 fadeIn 在打开或附加 div 时必须显示此效果，但没有得到结果

我的问题是，这是关于什么不好，为什么这个 div 加载时没有 fadeIn 效果，谢谢。

Answer 1

您需要先隐藏内容：https://codepen.io/creativedev/pen/eKMyYW

function add(id) {
    var holdyDiv = jQuery("<div>Hello" + id + "</div>");
    holdyDiv.hide().appendTo('body').fadeIn(3000);
}

Answer 2

在将其附加到正文之前先使用 fadeIn。

var holdyDiv=jQuery("<div>Hello</div>");

holdyDiv.fadeIn(3000).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者先隐藏起来

 var holdyDiv=jQuery("<div>Hello</div>");

    holdyDiv.hide().appendTo('body').fadeIn(3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

function add(id) {
    var holdyDiv = jQuery("<div>Hello" + id + "</div>");
    holdyDiv.fadeIn(3000).appendTo('body');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <a onclick="add('test');">OPEN</a>
</body>

您需要将 holdyDiv.appendTo('body').fadeIn(3000); 替换为 holdyDiv.fadeIn(3000).appendTo('#printData'); 才能解决您的问题:-)

Answer 4

更具体地说，最初我们在第一次加载时隐藏 div，然后我们 show/hide（切换）当点击 link 时 div。

jQuery('document').ready(function() {
  var elem = jQuery('<div id="test"></div>');
  jQuery("body").append(elem);
  elem.hide();
});


function add(text) {
  holdyDiv = jQuery('#test').html('Hello '+text+' !!');
  jQuery('#test').fadeToggle('fast');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head></head>
  <body>
    <a onclick="add('Test');">Show/hide div</a>
  </body>
</html>

希望对您有所帮助。

干杯

jquery 从函数加载时 appendTo 效果淡出 div

jquery appendTo effect fade when load from function div

javascript

jquery

fadein