Sandra Schlichting Sandra Schlichting - 1 month ago 6
Javascript Question

Do I use fadeIn() wrong?

Looking at fadeIn() I get the impression that I just have to add

.fadeIn("slow")
to an element like so

$('#template').tmpl(data).prependTo('#content').fadeIn("slow");


but it appears instantaneously and doesn't even give an error.

It can be seen here

http://jsfiddle.net/HYLYq/8/



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





Any idea what's wrong?

Answer

You need to .hide() it before appending it to the DOM.

$('#template').tmpl(data).hide().prependTo('#content').fadeIn("slow");

Alternatively, you could put style="display:none;" in the HTML of your template and then you wouldn't need .hide().

EDIT: Also, your template is only text. So, .hide() will not work unless you wrap it in something first. A <span> or <div> should work just fine.