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

var afilters = [];
var query = evt.getParameter("query");

afilters.push(new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, query);
afilters.push(new sap.ui.model.Filter("age", sap.ui.model.FilterOperator.Contains, query);

var list = this.getView().byId("list");
var binding = list.getBinding("items");

binding.filter(new sap.ui.model.Filter({filters: afilters, and: true|false}));

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);才能解决您的问题：-）

Answer 4

更具体的说，首先我们在第一次加载时隐藏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>

希望这会有所帮助。

欢呼

从功能div加载时jQuery淡出效果

4 个答案: