如何让li项目在这个jQuery列表中滑动和/或淡出视图
How can I get li items to slide and/or fade into view on this jQuery list?
好的，所以我有一个输入文本区域，当你点击它的回车键时，会出现一个包含你的单词的列表项。当你点击列表项上的X时，它会滑出视图（我能弄清楚）。
但当你点击回车键时，我不知道如何让列表项向下滑动到视图中——相反，它们只是突然出现，我认为这看起来很糟糕。
当您点击回车键时，我如何使列表项目优雅地滑入视图？
http://jsfiddle.net/mlynn/vxzc6z6y/
HTML
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:28px;"><b><a href="index.html"></b></a></p></div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--<a href="profile.html">Home</a> |
<a href="index.html">Generic</a> |
<a href="index.html">Elements</a> | -->
</div>
</div>
</section>
<section id="wrapper">
<br><br>
<!--<img src="images/blacksquare.png" width="525" height="197"></img>-->
<div style="float:left;padding:0px 0px;font-size:14px;">Left...</div>
<div style="float:right;padding:0px 0px;font-size:14px;">...Right</div>
<br><br>
<div class="LeftPanel">
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li><a href="#">item 2</a></li> -->
<li style="width:200px;">
<a href="#" class="ActiveListItem">Category</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Type a task and hit enter..." autocomplete="off">
</form>
<!-- <ul class="active">
<li>Work <a href="">X</a></li>
<li>Sleep <a href="">X</a></li>
<li>Repeat <a href="">X</a></li>
</ul> -->
</div>
<div class="InterestContainer mousescroll">
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 0px;">
<ul class="active">
<!--
<li>Work <a href="">X</a></li>
<li>Sleep <a href="">X</a></li>
<li>Repeat <a href="">X</a></li>
-->
</ul>
</div>
</div>
</div>
<div class="RightPanel">
<div style="float:right;vertical-align:top;width:450px;height:400px;background:white;border-color:#ccc;border-width:1px;border-style:solid;border-radius:4px;">
New div goes here??
</div>
</div>
</section>
<section id="feety">
Footer
</section>
</body>
</html>
CSS
/*adder*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:#FFFFFF; /*Back Colors*/
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #34495e;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#FFFFFF; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:#000000;
position:relative;
/*background:url('http://wallpaperupdate.com/Images/product/plaid-wallpaper-kxeo-l.jpg');*/
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
.LeftPanel{
float:left;
width:465px;
}
.RightPanel{
float:right;
width:465px;
}
.InterestContainer{
height:374px;
width:460px;
background:none;
vertical-align:top;
/*border-color:#000;
border-width:1px;
border-style:solid;
border-radius:4px;*/
}
.mousescroll {
overflow-x:hidden;
overflow-y:auto;
}
/*
.mousescroll {
overflow:hidden;
}
.mousescroll:hover {
overflow-y:scroll;
}*/
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:#ccc;
border-width:1px;
width: 130px; /*Widthchanger1*/
border-radius: 4px;
margin-left:0px;
margin-right:0px;
font-size:14px;
height:33px;
}
.ActiveListItem:after {
content: "'25BC"; /*carat and spaces '00a0*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:17px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black !important;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:10px; /*Widthchanger2, got the activeitem centered with list text this way*/
margin-right:0px;
margin-top:5px;
margin-bottom:6px;
width:100px; /*kinda messes with width of text*/
}
ul.navbar li {
position: relative;
width:130px; /*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#dadfe1;
color: #34495e;
font-weight:900;
}
ul.navbar li ul {
margin-top: 0px; /*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
}
form { }
.lister input {
border-radius: 5px;
width:278px; /*width of todo input box*/
height:33px;
padding-left:10px;
padding-right:10px;
border: 1px solid #ccc;
float:left;
margin-bottom:20px;
font-size:14px;
font-family:"Tahoma";
}
.lister ul {
/*list-style: square inside;*/
padding: 10px; /* padding for outside area of list*/ /* This is what's visible when not in use*/
width:419px;
background: #eee;
border-radius: 5px;
/* width: 100%; */
font-family:"Tahoma";
}
.active { border: 1px solid #ccc; }
.inactive { display: none;}
.lister li {
padding: 10px; /*controls height of list items*/
font-size:16px; /*font size of list items*/
font-weight: 600;
color: #34495e;
text-align:left;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
/*.lister li:before {
content: "";
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px;
}
.CategoryIcon {
float:right;
color:red;
padding:40px 40px;
} */
/*Clearable*/
.clearable {
background: #fff;
background:url(http://s3.amazonaws.com/redditstatic/award/1_year_club-40.png);
background-repeat: no-repeat;
background-size: 10px 10px;
background-position:right -15px center;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; }
.clearable.onX { cursor: pointer; }
JS-
// 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 + " " + 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 + " " + 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();
});
});
谢谢。
不是通过在th-ul:上调用append来追加li
ul.append('<li>' + CategoryIcon + " " + inputVal + '<a href="">X</a></li>');
您可以将这个新li选择到jQuery对象，隐藏它，附加到ul，然后调用slideToggle:
$('<li>' + CategoryIcon + " " + inputVal + '<a href="">X</a></li>').hide().appendTo(ul).slideToggle(1000);
相关文章：
- 音频控件在mouseover上显示，在mouseout上淡出
- 如何使用javascript从主svg对象动态创建svg视图框
- 正在使用$location.path(.）路由ng视图
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何包含特定于每个视图angularjs的javascript文件
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- Ajax Live搜索发布到Laravel视图
- backbone.js无法渲染视图
- 根据某些条件在视图之间切换
- ng视图外的链接重定向到ng视图内的页面
- Javascript将图像src更改为淡入淡出
- css(或jQuery）悬停时淡入淡出
- 如何让li项目在这个jQuery列表中滑动和/或淡出视图
- (阅读更多链接）到模式淡入淡出视图
- 淡入视图中的图元，淡出视图时淡入淡出
- 图像的淡入/淡出扩展了其周围图像的网格视图
- AngularJS淡入/淡出视图
- 如何根据 SELECT 更改淡出/淡入视图
- jQuery -检查元素是否进入视图，如果进入则淡出
