Question

正如您所看到的，我正试图在同一个窗口中打开google.com，此时大红色球从右侧开始淡入。相反，google.com会在从右侧开始淡入后大约一秒钟打开。如何让我的window.location函数等到淡入完全结束？

是的，我将JQuery 1.6.2链接到我的页面。

标记：

    <a href="http://www.google.com"><img class="animated fadeInRightBig" src="http://www.clipartsfree.net/vector/large/roystonlodge_Simple_Glossy_Circle_Button_Red_Vector_Clipart.png" style="">
     </a>
</body>

JQuery的：

$('.animated').promise().done(function(){
window.location = "http://www.google.com";
});

文森特：我尝试了以下方法，但没有奏效。有任何想法吗？

$('.animated fadeInRightBig').on('transitionend webkitTransitionEnd oTransitionEnd     otransitionend', function() {
window.location = 'http://www.google.com';
});

Answer 1

为什么不使用像这样的回调处理程序......

$("#someElement").show('slide', {}, 400, function(){//your code here!});

Answer 2

我认为promise().done不适用于CSS转换。尝试使用transitionEnd事件。

这在浏览器中有所不同，因此您应该看一下：

How do I normalize CSS3 Transition functions across browsers?

E.g。

$('.animated').bind('transitionEnd', function() {
    window.location = 'bla';
});

Answer 3

您希望在执行重定向的.animated元素上向'fx'队列（默认值）添加队列函数。转换/动画完成后，将自动调用该队列函数。

$('.animated').queue('fx', function() {
    var url = $(this).attr('href');
    window.location = url;
});

// this will dequeue your added function automatically
$('.animated').addClass('fadeInRightBig');

Answer 4

使用元标记这是一种更简单的方法：

<meta http-equiv="refresh" content="6; url=https://www.google.com/">
<meta name="keywords" content="automatic redirection">

Answer 5

你应该使用这个标志：

animation_end = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

这对我有用：

animation_end = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

remove_hallway = function(){
    var hallway = $("#hallway_wrapper");
    hallway.addClass("animated");
    hallway.addClass("zoomOutUp");
    hallway.one(animation_end,function(){
        hallway.css("visibility","hidden");
        hallway.removeClass("zoomOutUp");
        hallway.removeClass("animated");
        $("#room_wrapper").css("visibility","visible");
        create_room(["Default",urls],"fadeInUp");
});

此代码对我有用。只有在完成之前调用的zoomOutUp动画时，它才会执行hallyway.one（）内部的操作。

promise（）。done（）方法不会等到我的animate.css效果完成

5 个答案: