Question

我有一个简单的加载栏，在进入我的主页后会变得更加饱满和充实（使用CSS动画制作动画）。当栏填充完整后，用户应链接到下一个站点。

HTML简短：

<div id="loadingbar">

    <div id="loadingprogress">
    </div>

</div>

我找到了这个JS-Code，但它不起作用：

$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "http://www.google.com";
});

有什么问题？

Answer 1

将其应用于您正在设置动画的loadingprogress，而不是其父

$("#loadingprogress").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "http://www.google.com";
});

Updated jsFiddle

Answer 2

首先，我有一些小问题。你在测试这个jQuery和浏览器是什么？我用jQuery 1.10做了一个小小提琴。在这里，我使用“on”而不是“bind”并使其工作。我希望我的代码可以帮助你。

测试： Google Chrome版本31.0.1650.57 FF 25.0.1 Safari 6.1.1

HTML

<div id="loadingbar">
    <div id="loadingprogress">
    </div>
</div>

CSS

#loadingbar{
    background-color:black;
    overflow:hidden;
    width:200px;
    height:20px;
}

#loadingprogress {
  width:100%;
  height:100%;
  background-color:green; 
  -webkit-animation: moveFromLeft 1.5s ease both;
  -moz-animation: moveFromLeft 1.5s ease both;
  animation: moveFromLeft 1.5s ease both;
}
    @-webkit-keyframes moveFromLeft {
      from { -webkit-transform: translateX(-100%); }
    }a
    @-moz-keyframes moveFromLeft {
      from { -moz-transform: translateX(-100%); }
    }
    @keyframes moveFromLeft {
      from { transform: translateX(-100%); }
    }

的javascript

(function($){
    var animEndEventNames = ['webkitAnimationEnd',
        'oAnimationEnd',
        'MSAnimationEnd',
        'animationend'].join(" ");
    $("#loadingbar").on(animEndEventNames, function(e){
        window.location.href = "/test.htm";
    });
}(jQuery));

以下是我jsfiddle的链接。我希望它有所帮助！

如何在CSS动画后链接？

2 个答案: