Jquery 触发航路点时的多个动画_Jquery_Jquery Waypoints

Jquery 触发航路点时的多个动画

jquery

Jquery 触发航路点时的多个动画,jquery,jquery-waypoints,Jquery,Jquery Waypoints,我想在触发航路点元素时触发以下动画（一个简单的条形图）：彩色div将宽度从0更改为500px 包含文本的第二个div正在淡入问题：彩色div按预期工作，但我没有设法使第二部分工作。要么根本不显示，要么一直显示我已经尝试过很多想法，比如使用span标签，但我仍然无法让它工作这是我的代码： <style> .Waypoint-Bar{ width: 100px; height: 10px; background-color: red; transition:

我想在触发航路点元素时触发以下动画（一个简单的条形图）：

彩色div将宽度从0更改为500px
包含文本的第二个div正在淡入

问题：彩色div按预期工作，但我没有设法使第二部分工作。要么根本不显示，要么一直显示

我已经尝试过很多想法，比如使用span标签，但我仍然无法让它工作

这是我的代码：

<style>
.Waypoint-Bar{
  width: 100px;
  height: 10px;
  background-color: red;
  transition: all 440ms ease-in;

}

  .Waypoint-Bar-Animation{
    width: 500px;
    height: 10px;
    background-color: blue;
}

.bar-text {
  display: none;


}

.bar-text-animation {
  display: block;

}
</style>
</head>
<body>

  <div class="Waypoint-Bar"></div>
  <div class="bar-text">Text</div>

 </p>

<script>

var $bar-text = $('.bar-text');
var $waypointbar = $('.Waypoint-Bar');


$waypointbar.waypoint(function(direction) {
    if (direction == 'down') {
    $waypointbar.addClass('Waypoint-Bar-Animation');
    $bar-text.addClass('bar-text-animation');


  } else {
    $waypointbar.removeClass('Waypoint-Bar-Animation');
    $bar-text.removeClass('bar-text-animation');
  }
}, {offset: '53%'});


</script>


.航路点栏{
宽度：100px；
高度：10px；
背景色：红色；
过渡：所有440毫秒都容易进入；
}
.航路点栏动画{
宽度：500px；
高度：10px；
背景颜色：蓝色；
}
.bar文本{
显示：无；
}
.bar文本动画{
显示：块；
}
正文

变量$bar text=$（'.bar text'）；
变量$waypointbar=$（'.waypointbar'）；
$waypointbar.航路点（功能（方向）{
如果（方向==“向下”）{
$waypointbar.addClass（'Waypoint-Bar-Animation'）；
$bar text.addClass（'bar-text-animation'）；
}否则{
$waypointbar.removeClass（'Waypoint-Bar-Animation'）；
$bar text.removeClass（'bar-text-animation'）；
}
}，{偏移量：53%}）；