jQuery不会淡出

时间:2013-10-20 22:54:50

标签: jquery html replace fadein

隐藏它并替换它的内容后,我在一段时间内褪色有些麻烦。

这是替换之前我的html

<span id="replace_with_editor">
    <a id="edit_button" class="btn btn-success" href="thread.php">Post ny tråd</a>
</span>

这是我的jQuery代码

replace_with_editor = $('#replace_with_editor');
    $('#edit_button').click(function(e) {
        e.preventDefault();
        replace_with_editor.hide();
        replace_with_editor.html('<form role="form" method="post" action="process/submit_thread.php"><div class="form-group"><label for="Title">Tittel</label><input id="thread_title" name="thread_title" type="text" class="form-control" placeholder="Skriv en tittel for tråden."></div><div class="form-group"><label for="Svar">Tråd</label><textarea id="thread_editor" name="thread_content" rows="10" class="form-control"></textarea></div><input type="hidden" value="category_id" name="category_id"><input type="hidden" value="forum_id" name="forum_id"><button type="submit" class="btn btn-success">Post tråd</button></form>');
        replace_with_editor.fadeIn(2000);
    });

由于某种原因,当我尝试使用此脚本时,新内容会显示但fadeIn()不起作用,它会立即显示。

猜猜我做错了什么?哦,由于调试,jQuery没有嵌套。 非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

尝试将你的隐藏功能传回给你。

replace_with_editor = $('#replace_with_editor');
    $('#edit_button').click(function(e) {
        e.preventDefault();
        replace_with_editor.hide(function(){
        replace_with_editor.html('<form role="form" method="post" action="process/submit_thread.php"><div class="form-group"><label for="Title">Tittel</label><input id="thread_title" name="thread_title" type="text" class="form-control" placeholder="Skriv en tittel for tråden."></div><div class="form-group"><label for="Svar">Tråd</label><textarea id="thread_editor" name="thread_content" rows="10" class="form-control"></textarea></div><input type="hidden" value="category_id" name="category_id"><input type="hidden" value="forum_id" name="forum_id"><button type="submit" class="btn btn-success">Post tråd</button></form>');
        replace_with_editor.fadeIn(2000);
});
    });

我还添加了一个jsfiddle,告诉你是否有你想要的东西。 http://jsfiddle.net/JfGZM/