这是一个场景......
我有一个专栏.在列中,我有多个div,每个div都有文本.有点像类别列表.哪一个是SELECTED获得不同的背景颜色.
我想要做的是使用jquery,以便当点击不同的div时,背景颜色似乎在其余项目后面滑动,直到它到达您选择的那个.
有没有人知道是否可以这样做？如果是这样,关于Markup的任何想法？
任何帮助是极大的赞赏.
需要有一个包装器,每个部件的内容容器和滑动的东西......
<div>
<div class='slider'></div>
<div>Content 1</div>
<div>Content 2</div>
</div>
有趣的请求:)您可以使用.animate()和一点点CSS这样做,像这样:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css" >
#content div { width: 200px; z-index: 2; }
#content div.slider { position: absolute; background: #99AABB; z-index: -1; }
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
$(function(){
$("#content div:not(.slider)").click(function() {
$(".slider").animate({ top: $(this).offset().top, height: $(this).height() });
});
});
</script>
<div id="content">
<div class='slider'></div>
<div>Content 1 Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div>
<div>Content 2<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div>
</div>
</body>
</html>
尝试一下:)只需点击任一div即可看到效果. 在这里看一个演示
重要的一点:
.slider点击处理程序中的div.animate() 与目标div相同的偏移/高度z-index所以它显示为背景.sliderDIV将工作