我已经成功地将列表向左动画化了,但是当涉及选择列表的第一个元素时,我卡住了。我尝试使用:
$('ul#services > li:first');
$('ul#services > li:first-child');
$('ul#services > li').eq([0]);
以下是xhtml代码:
在每种情况下,console.log(first)
(使用的var
名称)都会返回所有的列表项。我是否做错了什么明显的事情?
最终计划是克隆第一个li
,将其附加到父ul
,从列表中删除li
,并允许列表无限滚动。它只是一些服务的列表而不是链接,因此目前我没有计划添加滚动或左/右功能。
当前的xhtml:
(编辑以添加当前代码/ html的全部内容)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<style type="text/css" media="screen">
ul#services {overflow: visible; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(document).ready(function() {
$('h1 > span.businessName').each(
function() {
var text = $(this).html();
var first_letter = text.substr(0,1);
if ( /[a-zA-Z]/.test(first_letter) ) {
$(this).html('<span class="firstLetter">' + first_letter + '</span>' + text.slice(1));
}
}
);
});
$('ul#services > li').filter(':odd').addClass('odd');
$('ul#services > li').filter(':visible:last').addClass('last');
//--> Function starts
jQuery.fn.carousel = function() {
// 1. find the width of the list items:
var listWidth = $('ul#services > li').outerWidth();
// 2a. find the current first item:
var curFirst = $('ul#services > li').first();
console.log(curFirst);
// 2b. append the current first item:
// 2c. remove the first item
// 3. animate the list, to move left by listWidth:
$('ul#services > li').delay(500).css('position','relative').animate(
{
left: '-=' + listWidth
},
5000,
function() {
// $('ul#services').get(0).remove();
$('ul#services').delay(500).carousel()
}
);
};
//--> Function ends.
$('ul#services').carousel();
}
)
</script>
</head>
<body>
<div id="pageWrap">
<div id="branding">
<h1><span class="businessName">business name</span> <span class="tagline">some other info</span></h1>
<hr id="rule">
</div>
<div id="content">
<div class="carousel">
<div class="wrapper">
<ul id="services">
<li>one</li
><li>two</li
><li>three</li
><li>four</li
><li>five</li
><li>six</li
><li>seven</li
><li>eight</li
><li>nine</li
><li>ten</li>
</ul>
</div>
</div>
<div id="mainPane">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="sidebar">
<div id="contact">
<!--
STARTS hCARD (below)
-->
<div id="hcard">
<div id="hcard-yy-xx" class="vcard">
<span class="fn"><span class="given-name">YY</span> <span class="family-name">XX</span></span>
<div class="org">business name</div>
<a class="email" href="mailto:xx@xx.com">email</a>
<div class="tel">
</div>
<a class="downloadAs" href="http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=http://www.davidrhysthomas.co.uk/arch/tester.html">Download contact information</a>
</div>
</div>
<!--
ENDS hCARD (above)
-->
</div>
<div id="professionalBodies">
<ul>
<li>some stuff</li>
</ul>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
针对Nick Craver的回答进行更新:
...我认为你想要的是:
$('ul#services li:first').remove();
...你可能想要的是这样的:$('ul#services > li:first').delay(500)...
使用$('ul#services li:first').remove();
会产生错误:
未捕获的类型错误:对象#没有方法'remove'
与使用$('ul#services > li:first').delay(500)...
相比,行为似乎没有区别。