css - jquery鼠标悬浮，显示动态延伸线条,如何在鼠标移开后依然让线条元素延伸到终点

问题描述

问 题

1.一个标题，鼠标悬浮时从图片中心伸出一个类似箭头指示的线条，
使用jquery hover添加类的方法给这个标题添加动画，动画是用css keyframes做的,
困惑的是有时候线条动画还没到终点鼠标就移开了，然后线条动画就中断，想要做成，如果鼠标移开，动画依然完成，完成之后再消失，有办法实现吗
html:

   <div class="leftcolumn column">
      <div class="index2 description">支持基于SM2、<br/>SM9的国密算法</div>
   </div>
   <div class="middlecolumn">
      <div id="linear5" ></div>

   </div>
   <div class="rightcolumn column">
       <div class="index2 description">应用商店移动应用APP<br/>的检测、加固、态势感知     </div>  
   </div>
   

css:

   
   .line5{
  position: relative;
top:150px;
left: 540px;

width: 0%;
height: 3px;
background-color: #3ebbff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#3ebbff), to(#3ebbff));

-webkit-animation:aaa 2s linear 1;
-webkit-animation-fill-mode:both;
   
}
@keyframes aaa{
0%  {width:0%; }
30% {width:2%; }
60% {width:6%; }
100%{width:10%; }

}

jquery:

$(document).ready(function(){
// alert();
$(".rightcolumn .index2").hover(function(){
    $("#linear5").addClass("line5");
},function(){
    $("#linear5").removeClass("line5");
})
})

解决方案

稍微要麻烦一些，因为需要同时实现

1. 鼠标如果没移走，那么动画的进度条就要一直显示, 不能消失.

2. 鼠标经过后马上移走， 动画还需继续播放完毕，完毕后进度条消失。

Js代码 在线效果演示

$(document).ready(function() {
    $("#linear5").bind('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function(e) {
            $(this).data("animation-end", 1);
            if ($(".rightcolumn .index2").data("hover") == 0) {
                $(this).removeClass("line5");
                $(this).data("animation-end", 0);
            }
        });

    $(".rightcolumn .index2").hover(function() {
        $("#linear5").addClass("line5");
        $(this).data("hover", 1);
    }, function() {
        $(this).data("hover", 0);
        if ($("#linear5").data("animation-end") == 1) {
            $("#linear5").removeClass("line5");
            $("#linear5").data("animation-end", 0);
        }
    });

});

这篇关于css - jquery鼠标悬浮，显示动态延伸线条,如何在鼠标移开后依然让线条元素延伸到终点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！