Question

对于我所建造的网站，我有一个启动画面。

<div id="preloader" class="animated zoomOut">
    <div class="loader">
        <img src="assets/images/preloader-logo.png" alt="oscar pro logo"/>
    </div>
</div>

即时使用动画css为缩放设置动画，问题是在缩小后，它会获得完整的宽度和高度，并且我无法与网站进行交互。

我尝试使用jquery将其显示设置为无，但我似乎无法弄清楚...

$('preloader').one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    $(this).css('display', 'none');
});

如果我将功能更改为警报，则会在页面加载时触发

任何帮助？

Answer 1

彼得的回答有误导，原因有二：

1 - 除了$.one()函数之外，jQuery确实还有一个名为$.on()的函数。他们都做了稍微不同的事情：

$.one() - 将事件处理程序设置为仅触发一次。在事件可能被意外触发多次的情况下很有用（例如，在悬停时）。

$.on() - 设置标准事件处理程序，以便在触发事件时触发。如果您希望每次都能触发某些内容（例如，在keyup上），则非常有用。

2 - 他的答案没有解决问题的可能原因（根据您在问题中发布的代码）。正如Aman在对Peter的回答的评论中指出的那样，明显的错误是为你的预加载器div指定的选择器是不正确的。

它应该是一个有效的CSS选择器：

$('#preloader').one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    $(this).css('display', 'none');
});

Answer 2

$('preloader').on("animationend", function(){
    $(this).css('display', 'none');
});

不......一个（“animationend”.....

希望有所帮助

jquery检测动画结束animate.css

2 个答案: