如何将slideDown(）与appendTo(）一起使用

how to use slideDown() with appendTo()

本文关键字：一起 appendTo slideDown      更新时间：2023-09-26

我想将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()？

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

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

如果您进行以下更改，它应该可以工作：

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

这使得它最初是隐藏的，允许您将其向下滑动。

我想你的意思是想用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分解为一个变量。

相关文章：