Question

当li移动到顶部或底部时，如何给出动画效果。

请检查我的fiddle ，这里我试图在点击事件{@ 1}}移动到底部或顶部时添加动画效果。

的index.html ：

li

的script.js

<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>

的style.css

$(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");

  });

});

Answer 1

我创建了一个li向上和向下移动的动画。

请尝试：

<强>更新

＆＃13;

$(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");
  });

});

＆＃13;

.kds {
  list-style-type: none;
}

.kds li {
  padding: 5px;
  border: 1px solid gray;
  margin: 1px;
  position:relative;
  height:20px;
}

.currentSelection {
  background-color: gray;
}

＆＃13;

<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">

＆＃13;

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

Answer 2

在上一个和下一个点击事件中为current元素使用以下代码段来实现动画效果，只需添加以下行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

当<li>移到顶部或底部

2 个答案: