javascript - 我使用 fadeIn() 是否错误？

Question

查看 fadeIn()我的印象是我只需将 .fadeIn("slow") 添加到这样的元素

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

但它会立即出现，甚至不会给出错误。

可以在这里看到

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>

知道出了什么问题吗？

Answer 1

您需要.hide()在将其附加到 DOM 之前。

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

或者，您可以输入 style="display:none;"在模板的 HTML 中，然后您就不需要 .hide() .

编辑:此外，您的模板只是文本。因此，除非您先将其包装在某些内容中，否则 .hide() 将不起作用。一个<span>或<div>应该可以正常工作。