jQuery 一起追加和滑动答案

【问题标题】：Append and Slide together jQueryjQuery 一起追加和滑动
【发布时间】：2011-04-14 10:39:51
【问题描述】：

我有这个 append 方法，我用它来添加更多输入框，直到有 10 个输入框将禁用添加更多输入框。

i = 0;
$('#add-link').click(function() 
{   
    if(i < 9)
    {
        $('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>');
        i++;
    }
    if(i == 9)
    {
        $('#add-link').html('');    
    }
});

虽然，这很好。但是，我想在附加时实现一个 slideDown，我试过这样做：

$('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>').slideDown("fast");

这根本不起作用。

【问题讨论】：

标签： jquery append slidedown jquery-effects

【解决方案1】：

类似于 SimpleCoder 的解决方案，但仅在一行中使用了appendTo()：

$('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>').appendTo($('.insert-links')).slideDown("fast");

演示：http://jsfiddle.net/V4SVt/336/

【讨论】：

排成一行只会失去可读性..不确定你从中获得了什么
单行方面不如 .appendTo() 使用的重要。这是关键的变化。

【解决方案2】：

虽然 SimpleCoder 的解决方案完全有效，但我会这样做：

i = 0;
$('#add-link').click(function() {   
    if(i < 9) {
        $('.insert-links').append('<div style="display: none;" class="new-link link_' + i + '" name="link[]"><input type="text" /></div>');
        $('.link_' + i).slideDown("fast");
        i++;
    }
    if(i == 9) {
        $('#add-link').fadeOut('200');
    }
});

这样做的原因是每个链接input 都会以第二个类的形式获得一个 ID，如果一个人不小心添加了超过一个需要。我还在add-link 元素上添加了淡出效果，这样用户就不会因为它刚刚消失而感到困惑。当然，这只是个人喜好问题，但我觉得它更人性化。

希望这会有所帮助。

【讨论】：

【解决方案3】：

append() 返回对原始选择器的引用，而不是附加的。我想你正在寻找这个：

$('.insert-links').append('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>')
$('.insert-links').find(".new-link:last").slideDown("fast");

现场演示：

http://jsfiddle.net/V4SVt/2/

【讨论】：