javascript - 悬停时停止的进度条循​​环

Question

我想创建一个进程条，当它增长到 100% 宽度时执行函数 foo()。

HTML:

<div></div>

CSS:

position: absolute;
top: 0px;
left: 0px;
height: 2px;
width: 0px;
background-color: rgba(0, 0, 0, 0.3);

所以我试着用 CSS 动画来做到这一点。

JS:

var duration = parseInt("15");
var bar = $("[...] div");
doSomething = (function () {
    bar.css({
        "animation-duration" : duration+"s",
        "animation-name" : "expand",
        "animation-timing-function" : "linear"
    });
    bar.on("animationend oAnimationEnd MSAnimationEnd mozAnimationEnd webkitAnimationEnd", function(e) {
        bar.css("animation-name", "none");
        foo();
        $(this).off(e);
    });
    doSomething();
});

这在第一次运行时完美运行，但它不会循环。

但是有了这个解决方案，我可以很容易地在 hover 处添加一个停靠点:

CSS:

 animation-play-state: paused;

我尝试了一个使用 jQuery animate() 的解决方案，循环有效但我不知道如何在悬停时添加停止并暂停动画，因为 jQuery 中没有选项可以执行像这样的东西。当然我可以停止动画，但是当我再次运行它时，它会以相同的持续时间播放剩余的宽度。

JS:

doSomething = (function () {
    /* First try
    interval = setInterval(function(){
        bar.animate({
            width: "100%",
        }, duration, "linear", function() {
            bar.css("width", "0px");
            foo();
        });
    }, 0);*/
    bar.animate({
        width: "100%",
    }, duration, "linear", function() {
        bar.css("width", "0px");
        foo();
    });
});
$("[parent of bar]")
    .mouseenter(function() {
        bar.stop();
    })
    .mouseleave(function() {
        bar.finish(); /* Animate: 100% - currentWidth in duration */
    });

还有其他想法吗？

Answer 1

$(document).ready(function() {
            $('.childSpan').addClass('progress');
            $('.childSpan').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                console.log('100%');//call the foo() function here
                $('.childSpan').removeClass('progress');
                setTimeout(function() {
                    $('.childSpan').addClass('progress');
                }, 1);
            });
        });

@-webkit-keyframes progress {
    0%{width:0%;}
    50%{width:50%;}
    100%{width:100%;}	
}

@-moz-keyframes progress {
    0%{width:0%;}
    50%{width:50%;}
    100%{width:100%;}	
}

@-o-keyframes progress {
    0%{width:0%;}
    50%{width:50%;}
    100%{width:100%;}	

}

@keyframes progress {
    0%{width:0%;}
    50%{width:50%;}
    100%{width:100%;}	

} 
.progress {
    -webkit-animation-name: progress;
    -moz-animation-name: progress;
    -o-animation-name: progress;
    animation-name: progress;
    -webkit-animation: progress 2s  linear;
    -moz-animation: progress 2s  linear;
    -o-animation: progress 2s  linear;
    -ms-animation: progress 2s  linear;

}

.parentDiv:hover > .childSpan {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.parentDiv{width:300px;background:black;height:50px;}
.childSpan{background: red none repeat scroll 0 0;display: block;height: 50px;width:0%;}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="processDiv" class="parentDiv">
 <span id="process" class="childSpan">
	
 </span>
</div>

试试这个，只需要在动画结束后添加和删除类。

如果你不需要完成后的事件那么剩下的可以通过css完成只需要将动画类型更改为

-webkit-animation: shake 2s infinite linear;
-moz-animation: shake 2s infinite linear;
-o-animation: shake 2s infinite linear;
-ms-animation: shake 2s infinite linear; 

默认情况下在 span 上添加进度类，在这种情况下不需要任何 jquery 代码。