如何使用jQuery为进程向导设置动画？

Question

我做了一个简单的向导脚本jQuery在继续处理数据的同时完美运行，我希望能够添加该过程的效果。

此图片示例：

  

如何设置购物车流程的动画    图片继续处理过程的step-1动画item1，依此类推？

 $(".button.next").click(function() {
   //store parent
   var step = $(this).parents(".step");
   if (step.next().length) {
     step.fadeOut("slow", function() {
       step.next().fadeIn("slow");
     });
   }
   return false;
 });
 $(".button.prev").click(function() {
   var step = $(this).parents(".step");
   if (step.prev().length) {
     step.fadeOut("slow", function() {
       step.prev().fadeIn("slow");
     });
   }
   return false;
 });

完整代码： https://jsfiddle.net/Lkwanexe/1/

  

感谢Tony Samperi

的帮助

Answer 1

这是如何使用jQuery animate来实现的。

1）你需要知道步骤之间的步长，所以我自己制作地图步长|

var lineStepWidth = {
  1: 120,
  2: 300,
  3: 450
};

添加HTML5属性数据以定义步骤

<div class="step step-1" data-step="1">

也可以使用一些css类来完成。

2）创建自己的简单函数，它将执行动画

$.fn.animateLine = function(step) {
    var lineWidth = lineStepWidth[step]; // get step width from attribute and map
    $('#line').animate({
      width: lineWidth
    }, 1000);
};

3）为您的操作添加自己的动画功能

$.fn.animateLine(step.prev().data('step')); // step.next / step.prev

多数民众赞成。

JSFIDDLE

这是我对您下一步思考问题的想法。