firefox中的未定义函数

Question

我不确定为什么下面的javascript函数在Firefox中不起作用

function focus_adverts(element_one, element_two){
      element_one.on('click', function(){
        $(this).one('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function(){
          element_two.show().addClass('animated flipInY');
          element_two.one('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function(){
            element_one.hide().removeClass('flipOutY flipInY');
          });
        });
      });
    }

    focus_adverts($('#tv-advertisement'), $('#tv-advertisement-video'));
    focus_adverts($('#tv-advertisement-video'), $('#tv-advertisement'));

此功能focus_adverts似乎根本不起作用。它不会以某种方式运行$(this).one内的代码......

为什么会发生这种情况？

Answer 1

确保在DOM加载完成后进行调用：

$(function(){
    focus_adverts($('#tv-advertisement'), $('#tv-advertisement-video'));
    focus_adverts($('#tv-advertisement-video'), $('#tv-advertisement'));
});

Answer 2

看起来您将CSS animationEnd属性命名为错误。试试这个

$(this).one('webkitAnimationEnd mozAnimationEnd oanimationend animationend', function() { ...

注意：animationend和oanimationend都是小写的。在我看来，最新的Firefox不再使用mozAnimationEnd并期待W3C animationend，这是您从未提供过的。

证明演示：http://jsfiddle.net/FNUy6/