[英]Do I use fadeIn() wrong?
看着fadeIn()我得到的印象是我只需要将.fadeIn("slow")
添加到这样的元素中
$('#template').tmpl(data).prependTo('#content').fadeIn("slow");
但它会立即出现,甚至不会出错。
可以在这里看到
$(document).ready(function(){ $('form').live('submit', function(){ var aform = $(this).serializeArray(); var data = {}; var i = aform.length; while(i--) { data[aform [i].name] = aform [i].value; } $('#template').tmpl(data).prependTo('#content').fadeIn("slow"); return false; }); });
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> <script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script> <.-- jQuery:tmpl() --> <script src="http.//ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min:js"></script> <script src="http.//jqueryui.com/external/jquery.bgiframe-2.1.2:js"></script> <script src="http.//jqueryui.com/ui/jquery.ui.core:js"></script> <script src="http.//jqueryui.com/ui/jquery.ui.widget:js"></script> <script src="http.//jqueryui.com/ui/jquery.ui.mouse:js"></script> <script src="http.//jqueryui.com/ui/jquery.ui.button:js"></script> <script src="http.//jqueryui.com/ui/jquery.ui.draggable:js"></script> <script src="http.//jqueryui.com/ui/jquery.ui.position:js"></script> <script src="http.//jqueryui.com/ui/jquery.ui.dialog.js"></script> <!-- template that will be used for inserting a form live when the okay bottom have been pressed and succeeded --> <script type="text/x-jquery-tmpl" id="template"> ${title} ${owner} </script> <form id="create_form" name="create_form" action="" method="post"> <input type="text" name="title" id="title" value="test1" /> <input type="text" name="owner" id="owner" value="test2" /><br class="new"/> <button class="n" type="submit">Create</button> </form> <div id="content"> </div>
知道有什么问题吗?
在将其附加到 DOM 之前,您需要.hide()
它。
$('#template').tmpl(data).hide().prependTo('#content').fadeIn("slow");
或者,你可以把style="display:none;"
在模板的 HTML 中,然后您就不需要.hide()
。
编辑:另外,您的模板只是文本。 因此, .hide() 将不起作用,除非您先将其包装在某些东西中。 <span>
或<div>
应该可以正常工作。
先隐藏元素,然后只有淡入淡出效果可见
$(document).ready(function(){
$('form').live('submit', function(){
var aform = $(this).serializeArray();
var data = {};
var i = aform.length;
while(i--) {
data[aform [i].name] = aform [i].value;
}
$('#template').tmpl(data).prependTo('#content');
$("#content").hide();
$("#content").fadeIn("slow");
return false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.