Question

这是一个场景......

我有一个专栏。在列中，我有多个div，每个div都有文本。有点像类别列表。哪一个是SELECTED获得不同的背景颜色。

我希望能够做的是使用jquery，这样当点击不同的div时，背景颜色似乎会在其余项目后面滑动，直到它到达你选择的那个。

有没有人知道是否可以这样做？如果是这样，关于Markup的任何想法？

非常感谢任何帮助。

需要有一个包装器，每个部件的内容容器和滑动的东西......

<div>
  <div class='slider'></div>
  <div>Content 1</div>
  <div>Content 2</div>
</div>

Answer 1

有趣的请求:)您可以使用.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即可看到效果。 See a demo here

重点：

忽略点击处理程序中的.slider div
.animate()与目标div相同的偏移/高度
降低z-index，使其显示为背景
您可以使用图片，无论CSS中的.slider div是什么工作

Answer 2

我会采用以下方法进行...

确保您的内容div具有透明背景，然后在列表顶部创建另一个div，该div也是透明的，直到所选事件发生，然后设置它的背景颜色，使其显示但是确保它的z-index是低于内容divs ...然后你可以考虑使用像scriptaculous这样的库来动画向下移动的div，你可以从标记为选中的div获得它需要去的位置，这样你就知道何时停止...我确信它们有一些很酷的速度效果，使它更加华丽（我想象它会快速滚动到所需的位置，然后慢慢“锁定”到位）

希望这有助于您的设计规划

Jquery滑动到点击位置

2 个答案: