如何使用ajax jquery和php设置多表单流程的动画？

通过PHP，在会话中计算并添加步骤，以避免在更新或刷新页面时返回到开头，通过以下变量

$step

<?php
  session_start();

  if ( !empty($_SESSION['datos_form']['__step__'])) {
    $step = $_SESSION['datos_form']['__step__'];
  } else {
    $step = '1';
  }

?>

流程的每一步都是根据从PHP接收到的Javascript代码值显示的，正如前面提到的

无需添加以下附加控件：

current = $(this).parent();
next = $(this).parent().next();

我有以下简单的CSS向导

我需要能够使它适应ajaxjavascript代码，这样它就可以为所执行的步骤设置动画

当前代码已经有一个使用称为sprite的技术的动画

function animacion(caso){}

我需要的是能够调整流程的动画，并使用一个与进度条一起出现的图标，类似于下图：

此动画必须添加到与反向链接一起工作的函数

animation（caso）{}

中，然后继续，在以下代码中的函数中添加一个示例：

$( ".test" ).animate({ "left": "-=50px" }, "slow" );

实际上，它是有效的，带有测试类的div通过在每个步骤中继续修改left样式

如何设置html代码css过程的动画？

$（函数（）{
显示步骤（）；
});
功能动物（caso）{
//$（“.test”）.animate（{“left”：“-=50px”}，“slow”）；
};
//函数保存表单数据并更改步骤
功能显示步骤（步骤）{
var data=$（“#form”）.serialize（）；
var url='saveTemp.php？步骤='+步骤；
$.ajax({
类型：“POST”，
url:url，
数据：数据
})
.完成（功能（resp）{
$（'.step'）.css（“显示”、“无”）；
$（'#step'+step）.fadeIn（“慢”）；
//每个步骤的动画
动物（步骤）；
});
};
.container{
宽度：100%；
填充顶部：20px；
}
李先生{
列表样式类型：无；
浮动：左；
宽度：33.33%；
位置：相对位置；
文本对齐：居中；
}
.progressbar li>*{
位置：相对位置；
垫底：20px；
显示：内联块；
字体大小：1.4rem；
颜色：#2c3f4c；
顶部：-45px；
}
李：以前{
内容：''；
宽度：12px；
高度：12px；
显示：块；
文本对齐：居中；
保证金：0自动；
边界半径：50%；
背景色：#edeff0；
}
李：之后呢{
内容：''；
位置：绝对位置；
宽度：100%；
高度：4px；
背景色：#edeff0；
顶部：4px；
左-50%；
z指数：-1；
}
李：第一个孩子：之后{
内容：无；
}
.progressbar li.active{
颜色：绿色；
}
.progressbar li.活动：之前{
背景颜色：绿色；
}
.progressbar li.active+li:after{
背景颜色：绿色；
}


步骤1
步骤2
步骤3

第一步
持续
步骤2
之后
持续
步骤3
之后
发送
这是否正确理解了您的需求


功能动画（caso）{
如果（！caso）{
document.getElementsByClassName（“progressbar”）[0].setAttribute（“数据活动的”），以及；
}否则{
document.getElementsByClassName（“progressbar”）[0].setAttribute（“数据活动”，caso）；
}
var items=document.getElementsByTagName（“li”）；
对于（变量i=0；i
.container{
宽度：100%；
}
.progressbar{
计数器复位：步骤；
}
李先生{
列表样式类型：无；
浮动：左；
宽度：33.33%；
位置：相对位置；
文本对齐：居中；
}
.progressbar li>*{
位置：相对位置；
垫底：20px；
显示：内联块；
字体大小：1.4rem；
颜色：#2c3f4c；
顶部：-45px；
/*新代码开始*/
顶部：-65px；
/*新代码结束*/
}
李：以前{
内容：''；
宽度：12px；
高度：12px；
显示：块；
文本对齐：居中；
保证金：0自动；
边界半径：50%；
背景色：#edeff0；
}
李：之后呢{
内容：''；
位置：绝对位置；
宽度：100%；
高度：4px；
背景色：#edeff0；
顶部：4px；
左-50%；
z指数：-1；
}
李：第一个孩子：之后{
内容：无；
}
.progressbar li.active{
颜色：绿色；
}
.progressbar li.活动：之前{
背景颜色：绿色；
/*新代码开始*/
-webkit过渡：背景300毫秒轻松；
过渡：背景300毫秒；
-webkit转换延迟：300ms；
过渡延迟：300ms；
/*新代码结束*/
}
/*删除代码开始*/
/*
.progressbar li.active+li:after{
背景颜色：绿色；
}
*/
/*删除代码结束*/
/*新代码开始*/
.progressbar{
位置：相对位置；
填充：0；
保证金：0；
}
.酒吧：之后{
内容：“；
高度：4px；
左：16.666%；
背景：绿色；
顶部：4px；
位置：绝对位置；
-webkit过渡：宽300毫秒；
过渡：宽度300毫秒；
}
.progressbar[数据活动=“1”]：之后{
宽度：0；
}
.progressbar[数据活动=“2”]：之后{
宽度：33%；
}
.progressbar[数据活动=“3”]：之后{
宽度：66%；
}
.progressbar[数据活动=”“]：之前{
不透明度：0；
}
.progressbar:不（[data active=”“]）：之前{
不透明度：1；
-webkit过渡：左300毫秒缓变，不透明度300毫秒缓变；
过渡：左300毫秒缓变，不透明度300毫秒缓变；
}
.progressbar[数据活动=“1”]：之前{
左：16.666%；
}
.progressbar[数据活动=“2”]：之前{
左：50%；
}
.progressbar[数据活动=“3”]：之前{
左：83.333%；
}
.酒吧：以前{
内容：“；
身高：1
function animacion(caso){}

$( ".test" ).animate({ "left": "-=50px" }, "slow" );