Question

我想将slideDown（）与appendTo（）

一起使用

这是我现在的代码

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    $("#add_words").on("keyup","input[type='text']",function(e) {
            if($(this).attr("data-isused")!="true"){
            $(this).attr("data-isused","true");
            wordscount++;
            $('<div class="line">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>').appendTo(scntDiv);
            // i++
            return false;
        }
    });
});

<div id="add_words">
    <div class="line">Word 1<input class="input1" type="text" value="1" /></div>
</div>

我的问题是，是否有可能将slideDown()应用于我的代码？

Answer 1

如果您进行以下更改，则应该有效：

$('<div class="line" style="display:none">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>').appendTo(scntDiv).slideDown();

这使它最初隐藏，允许您将其滑下来。

Answer 2

确保首先隐藏新添加的元素：

$(element).hide().appendTo(someOtherElement).slideDown();

Answer 3

我想你的意思是你想用appendTo将HTML添加到DOM中，然后使用slideDown来显示添加的内容，对吗？

在这种情况下，您需要确保在将内容附加到DOM时隐藏内容：

var html = '<div class="line">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>';
$(html).hide().appendTo(scntDiv).slideDown();

注意为了便于阅读，尽快将所有HTML分解为变量

如何使用appendTo（）的slideDown（）

3 个答案: