Question

是否有可能在重新安排列表项目时使用动画。

我有五个列表项

A,B,C,D,E

现在点击我希望动画点击列表项在中间很好地进行，其他也会相应地移动。订单不会改变，所以如果用户点击A，它将在三步中完成动画

1) A,B,C,D,E  initial 
2) E,A,B,C,D  first step
3) D,E,A,B,C   now A is in center

所以无论在中心获得点击项目它执行了多少步骤它应该是流畅的动画。通过更改列表中的位置，它已完成，但无法对其执行动画效果。我们可以管理动画儿童的订单变更吗？

下面显示的代码基于左侧位置，但它不会更改顺序，只会更改css和动画而非实际顺序

这是要测试的fiddle

      $('.horizontal li').on ('click',function (e)
      {      

      $(this).animate({ left: 150 }, 'slow');

      $(this).addClass('active').siblings().removeClass('active');

我添加了类'active'以在点击时突出显示中心元素，但是当我点击重新排列列表项时，我无法顺畅地为列表项设置动画。

CSS

  .horizontal  li.active {
        /*background:#2794c7;*/
        font-weight:bold;
        color:blueviolet;
        font-size: 20px;
        /*height: 150px;*/
        /*width:150px;*/
      webkit-transform: scale(1.2) ;
      -moz-transform: scale(1.2) ;
      -ms-transform: scale(1.2) ;
      -o-transform: scale(1.2) ;
      transform: scale(1.2) ;
    }

Answer 1

您正在提供亲戚left的{{1}}属性。所以，它不是动画。将li转换为left并将padding-left属性设为li display

block

$('.horizontal li').on('click', function(e) {

  $(this).animate({
    'padding-left': '150px'
  }, 'slow');

  $(this).addClass('active').siblings().removeClass('active');
});

.horizontal li.active {
  /*background:#2794c7;*/
  font-weight: bold;
  color: blueviolet;
  font-size: 20px;
  /*height: 150px;*/
  /*width:150px;*/
  webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
li {
  display: block;
}

更新以满足重新安排要求：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="horizontal">
  <ul>
    <li>Test</li>
    <li>Rest</li>
    <li>Best</li>
    <li>Waste</li>
  </ul>
</div>

$(document).ready(function() {
  $(".rearrangable div").each(function() {
    $(this).css("left", $(this).data('order') * 110);
  });
  $(".rearrangable div").click(function() {
    if ($(this).data('order') != 2) {
      var cur = $(this);
      $(".rearrangable div").each(function() {
        if ($(this).data('order') == 2) {
          $(this).data('order', cur.data('order'));
          return false;
        }
      });
      $(this).data('order', 2);
      $(".rearrangable div").each(function() {
        $(this).css("left", $(this).data('order') * 110);
      });
    }
  });
});

.rearrangable {
  position: relative;
}
.rearrangable div {
  position: absolute;
  height: 100px;
  width: 100px;
  text-align: center;
  background: grey;
  cursor: pointer;
  transition: left 1s;
}

上面的示例使用div而不是list来实现重新排列目标。单击的Div将在Div中心交换其位置。

Answer 2

我已经实现了使用动画重新安排列表项。要求是我有五个要素：

1   2   3   4   5

并重新排列顺序，当点击第一个元素时，它将位置放在中心，如下所示：

5   4   1   2  3

带动画。但你知道如何从Row中移动列表项，你可以检查我的小提琴：Jsfiddle

$('.horizontal li').on('click', function (e) {
    $(this).addClass('active').siblings().removeClass('active');
    var tparent = $(this).parent();
    var childs = tparent.children().length;
    var eachWidth = this.clientWidth + 10;
    var middle = eachWidth * (parseInt(childs / 2));
    var rowChild = $(this).parent().children('li');
    var currentIndex = rowChild.index($(this));

    rowChild.each(function (li) {
        if ($(this).attr("POS")) {
            cp = $(this).attr("POS");
        } else {
            $(this).attr("POS", li);
        }
    });

    function animateEach() {
        rowChild.each(function (li) {
            var _minePos = $(this).position().left;
            var cp = $(this).attr("POS");
            var _newPos = cp * eachWidth;

            $(this).animate({
                left: (cp - li) * eachWidth,
            }, 40, function () {
                // checkPOS();
            });
        });
        setTimeout(checkPOS(true), 40);
    }

    var currentelement = $(this);
    var currentIIN = $(this).attr("POS");

    function checkPOS(ee) {
        if (currentIIN != 2) {
            rowChild.each(function (li) {
                var eachPOS = $(this).attr("POS");
                if (eachPOS >= 4) {
                    $(this).attr("POS", 0);
                } else {
                    $(this).attr("POS", parseInt(eachPOS) + 1);
                }
            });
            currentIIN = currentelement.attr("POS");
            animateEach();
        } else {
            if (ee) currentelement.addClass('active');

        }
    }

    checkPOS();

p {
    margin: 1px;
    cursor: pointer;
}
li {
    cursor: pointer;
}
ul.horizontal {
    clear: both;
    display: block;
    height: 40px;
}
ul.horizontal li {
    float: left;
    /*background: #ccc;*/
    display: block;
    margin-left: 10px;
    padding: 5px;
    position: relative;
}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}
/*background: #ccc;*/
 display: block;
 margin-left: 10px;
 padding: 5px;
 position: relative;

}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}

检查我的Jsfiddle

Jquery中的动画：使用eq重新排列列表项？

2 个答案: