<li> 移动到顶部或底部时如何提供动画效果答案

【问题标题】：how to give an animation effect when <li> moves to top or bottom<li> 移动到顶部或底部时如何提供动画效果
【发布时间】：2016-04-16 19:45:14
【问题描述】：

如何在 li 移动到顶部或底部时赋予动画效果。

请检查我的fiddle ，我正在尝试在li 在点击事件中移动底部或顶部时添加动画效果。

index.html：

<ul class="kds">
<li>tile dtls1</li>
<li>tile dtls2</li>
<li>tile dtls3</li>
<li>tile dtls4</li>
<li>tile dtls5</li>
<li>tile dtls6</li>
</ul>

script.js

$(document).ready(function() {

  $('.previous').click(function() {
    var current = $('.currentSelection');
    current.prev().before(current);

  });
  $('.next').click(function() {
    var current = $('.currentSelection');
    current.next().after(current);
  });
  $(".kds li").on("click", function() {
    $(".kds li").removeClass("currentSelection");
    $(this).addClass("currentSelection");

  });

});

style.css

.kds {
  list-style-type: none;
}

.kds li {
  padding: 5px;
  border: 1px solid gray;
  margin: 1px;
}

.currentSelection {
  background-color: gray;
}

【问题讨论】：

jQuery snippet to swap two sets of elements with animation的可能重复
如果你将这些元素放在绝对位置，你可以给元素一个 CSS 过渡。
你能更新我的小提琴吗
没有。只需查看提供的链接或谷歌css transitions的答案。
你在寻找什么类型的动画？

标签： jquery html css animation

【解决方案1】：

我创建了一个动画，li 上下移动。

请尝试：

更新

$(document).ready(function() {

  $('.previous').click(function() {
    var current = $('.currentSelection');
    if( current.index() != 0 && !current.is(":animated") ){
      currentTop = parseInt(current.css("top").replace("px",""));
      current.animate({top:currentTop - 33 })
      current.prev().animate({top:currentTop + 33},function(){
          current.css("top",0).prev().css("top",0);
          current.prev().before(current);
      })
    }
  });
  
  $('.next').click(function() {
    var current = $('.currentSelection');
    if( current.index() != ( $(".kds li").length-1)  && !current.is(":animated") ){
      currentTop = parseInt(current.css("top").replace("px",""));
      current.animate({top:currentTop + 33 })
      current.next().animate({top:currentTop - 33},function(){
          current.css("top",0).next().css("top",0);
          current.next().after(current);
      })
    }
  });
  
  $(".kds li").on("click", function() {
    $(this).css("top","0px");
    $(".kds li").removeClass("currentSelection");
    $(this).addClass("currentSelection");
  });

});

.kds {
  list-style-type: none;
}

.kds li {
  padding: 5px;
  border: 1px solid gray;
  margin: 1px;
  position:relative;
  height:20px;
}

.currentSelection {
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="kds">
  <li>tile dtls1</li>
  <li>tile dtls2</li>
  <li>tile dtls3</li>
  <li>tile dtls4</li>
  <li>tile dtls5</li>
  <li>tile dtls6</li>
</ul>
<input type="button" value="previous" class="previous">
<input type="button" value="next" class="next">

或 JSFiddle：https://fiddle.jshell.net/e1jgusc1/1/

【讨论】：

@P.Frank 请检查您的样品。在li 分配了.css("top","0px"); 之前，您的代码将不适用于第一次单击每个li 元素。所以在$(".kds li")点击事件中添加这行$(this).css("top","0px");。
@JohnR 谢谢。 Firefox 运行良好，但在 Chrome 中有效却不起作用。我已经更新了我的答案，现在适用于所有浏览器。

【解决方案2】：

对你的current元素在上一个和下一个点击事件上使用以下代码sn-ps来实现动画效果，只需添加以下行current.hide().fadeIn("slow");

script.js：

$(document).ready(function() {

  $('.previous').click(function() {
    var current = $('.currentSelection');
    current.prev().before(current); 
    current.hide().fadeIn("slow");

  });
  $('.next').click(function() {
    var current = $('.currentSelection');
    current.next().after(current);
    current.hide().fadeIn("slow");
  });
  $(".kds li").on("click", function() {
    $(".kds li").removeClass("currentSelection");
    $(this).addClass("currentSelection");

  });

});

DEMO

【讨论】：

多次点击会出问题
那么你应该用固定高度将ul 包裹在一些div 下。