如何添加带有效果的输入中的列表项

Question

我正在编写一个代码，该代码应根据输入来制作购物清单。 因此，我有一个输入字段和一个将项目添加到列表的按钮。 单击该项目时，该项目也应消失。 我设法使它像这样工作：

 $(document).ready(function(){
  $("#button").click(function(){
    $("ul").append("<li>" + $("#input_field_value").val());
  });
  $("ul").on("click", "li", function(e){
    $(this).remove();
  });
});

但是，我需要使新列表项具有附加效果并删除，并且效果不佳。 我了解到您不能只添加效果到append -command。 我设法使我的代码添加具有效果的新列表项，但不会将输入字段的值打印到新列表项。 新列表项为空。 当添加新项目时，整个无序列表也会再次显示效果，只有新项目才应显示效果。 此外，单击删除项目将不再起作用。 这是我尝试的：

$(document).ready(function(){
  $("#button").click(function(){
    var inputvalue = $("#input_field_value").val();
    var item = $("<li>" + inputvalue);
    $("ul").append(item).hide().fadeIn(1000);
  });
  $("ul").on("click", "li", function(e){
    $(this).remove().hide().fadeOut(1000);
  });
});

我也尝试了其他一些东西，例如把appenTo弄乱了，但无法正常工作。

对于经验丰富的编码人员来说，这可能是显而易见的，但我只是想不通：)

谢谢您的帮助

Answer 1

• 在应用效果fadeOut()之前，您要隐藏/删除。
• 您要在应用效果fadeIn()之前添加。
• 在效果结束之前，使用fadeOut的回调删除元素。

---

 $(document).ready(function() { $("#button").click(function() { var inputvalue = $("#input_field_value").val(); var item = $("<li>" + inputvalue + '</li>'); item.hide(); $("ul").append(item); item.fadeIn(1000); }); $("ul").on("click", "li", function(e) { $(this).fadeOut(1000, function() { $(this).remove(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' id='input_field_value'> <p/> <button id='button'>Click me!</button> <ul> </ul>