Question

我有一个包含活动行的列表。当点击另一行时，我想要突出显示它（请参阅代码段）。到目前为止一切都很好。

但我也想让这种转变变得生动。如：实际上在屏幕上向下或向上移动突出显示。

我认为通过使用“position：absolute”突出显示div可以实现这一点：点击另一行后，我可以计算屏幕位置的差异，然后相应地移动div的“top”属性。对于动画，我会使用CSS的过渡。

但有更优雅的方法吗？

提前致谢！

none|block

$(document).ready(function(){

  $('li').on('click', function(){
    $('.highlight').removeClass('highlight');
    $(this).addClass('highlight');
  });

});

.highlight {
  background-color: #d7d7d7;
}

enter image description here

Answer 1

这很有效。添加额外的绝对li，当您点击其他li时，它会四处移动。

＆＃13;

$(document).ready(function(){

  $('li').on('click', function(){
  thisHeight = $(this).position().top;
   $('.highlight').css('top', thisHeight);
  });

});

＆＃13;

.highlight {
  background-color: #d7d7d7;
  position:absolute;
  height:18px;
  width:calc(100% - 40px);
  content:'';
  top:18px;
  left:40px;
  z-index:0;
  list-style:none;
  transition-duration:.3s;
}

ul {
position:relative;
}

li {
position:relative;
  z-index:2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="highlight"></li>
  <li>Row 1</li>
  <li>Row 2</li>
  <li>Row 3</li>
  <li>Row 4</li>
</ul>

＆＃13;

Answer 2

如果仅在突出显示状态和正常状态之间进行平滑过渡，则可以使用transition CSS属性，如下所示：

.highlight 
{
  background-color: #d7d7d7;
  transition: background-color 1s;
}

您可以更改课程转换的持续时间。

动画移动列表中的高亮显示（使用Jquery？）

2 个答案: