Javascript 如何使li项在jQuery列表上滑动和/或淡入视图？

好的，我有一个输入文本区，当你点击回车键时，会出现一个包含你的单词的列表项。当你点击列表项上的X时，它会从视图中滑出（我能猜出来）

但是我不知道当你按下enter键时如何让列表项滑入视图——相反，它们只是突然出现，我认为这看起来很糟糕

当您按enter键时，如何使列表项优雅地滑入视图

HTML

JS

//子菜单标识
$（函数（）{
$（'.navbar ul li a'）。单击（函数（）{
$（'.navbar>li:first child>a'）.text（$（this.text（））；
$（'.navbar>li>ul'）.addClass（'hidden'）；
$（'navbar li ul'）。滑动切换（100）；
});
$（'.navbar>li'）.mouseenter（函数（）{
$（this.find（'ul'）.removeClass（'hidden'）；
});
$（'.ActiveListItem'）。单击（函数（）{
$（'navbar li ul'）。滑动切换（300）；
});    
});
//新名单
$（文档）.ready（函数（）{
变量ul=$（'.lister ul'），
输入=$（“输入”），
分类素；
input.focus（）；
$（document）.on（'click'，'input.onX'，function（）
{
//警报（1）；
如果（input.val（）！=''）{
var inputVal=input.val（），
activeNumber=$（'.ActiveListItem'）.text（）；
如果（activeNumber==“1”）{
CategoryIcon=“”；
}否则{
CategoryIcon=“”；
}
ul.追加（“
”+CategoryIcon+“+inputVal+”
）；
如果（ul.hasClass（'inactive'））{
ul.removeClass（“非活动”）
.addClass（“活动”）；
}
};
input.val（“”）；
返回false；
});
$（'form'）。提交（函数（）{
如果（input.val（）！=''）{
var inputVal=input.val（），
activeNumber=$（'.ActiveListItem'）.text（）；
如果（activeNumber==“1”）{
CategoryIcon=“”；
}否则{
CategoryIcon=“”；
}
ul.追加（“
”+CategoryIcon+“+inputVal+”
）；
如果（ul.hasClass（'inactive'））{
ul.removeClass（“非活动”）
.addClass（“活动”）；
}
};
input.val（“”）；
返回false；
});
ul.on（'click'，'a'，函数（e）{
e、 预防默认值（）；
$（this.parent（）.slideUp（）；
如果（ul.children（）.length==0）{
ul.removeClass（“活动”）
.addClass（“非活动”）；
input.focus（）；
}
});
});
//清晰的
jQuery（函数（$）{
// /////
//可清除输入
函数tog（v）{return v？'addClass'：'removeClass'；}
$（document）.on（'input'，'.clearable'，function（）{
$（此）[tog（此值）]（'x'）；
}).on（'mousemove'，'.x'，函数（e）{
$（this）[tog（this.offsetWidth-18

---

谢谢。

不要通过拨打附加电话来附加li：

 ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');

ul.append（“
”+CategoryIcon+“+inputVal+”
）；

您可以将此新li选择到jQuery对象，隐藏它，附加到ul，然后调用slideToggle：

$('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>').hide().appendTo(ul).slideToggle(1000);

$（'
'+CategoryIcon+''+inputVal+'
'）.hide（）.appendTo（ul）.slideToggle（1000）；

请修复您的HTML（

）无效（元素必须按与打开顺序相反的顺序关闭，因此在这种情况下：

）。此外，您只需要JS Fiddle的HTML窗格中的

标记的内容（使用左侧的

元素包含相关的JavaScript框架，或者使用“外部资源”部分包含任意的JS或CSS）。

// sub menus identification
$(function() {




  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});









//newList

$(document).ready(function() {  

    var ul = $('.lister ul'),
        input = $('input'),
        CategoryIcon;


    input.focus();  

    $(document).on('click', 'input.onX', function()
                  {

                      //alert(1);

                     if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }


            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');

            }
        };
        input.val('');
        return false;

                  });


    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }


            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');

            }
        };
        input.val('');
        return false;
    });

    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().slideUp();

        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });

});







//clearable

jQuery(function($) {


  // /////
  // CLEARABLE INPUT
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('').change();
  });


});

 ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');

$('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>').hide().appendTo(ul).slideToggle(1000);