jQuery动画在Firefox中不起作用

Question

我正在为我的投资组合建立一个网站，但是我的动画在FireFox中不起作用。 我已经遍历了CSS和脚本，找不到任何可能引起问题的错误。 我的代码可在除FireFox之外的所有其他浏览器上使用。 该动画旨在将叠加层td沿对角线移出，但是在FireFox中，它们只是坐在那里然后淡出。 以下是我的2个动画函数和jsfiddle 。

$('.overlay').click(overlaymove);
$('#logo').click(overlayreturn);

function overlaymove() {
    $('.tl').animate({
        "right": "265px",
            "bottom": "265px"
    }, 1500);
    $('.tr').animate({
        "left": "265px",
            "bottom": "265px"
    }, 1500);
    $('.bl').animate({
        "right": "265px",
            "top": "265px"
    }, 1500);
    $('.br').animate({
        "left": "265px",
            "top": "265px"
    }, 1500);
    setTimeout(function () {
        $(".overlay").hide();
    }, 1500);
}

function overlayreturn() {
    $('.overlay').show();
    $('.tl').delay(500).animate({
        "right": "0px",
            "bottom": "0px"
    }, 1500);
    $('.tr').delay(500).animate({
        "left": "0px",
            "bottom": "0px"
    }, 1500);
    $('.bl').delay(500).animate({
        "right": "0px",
            "top": "0px"
    }, 1500);
    $('.br').delay(500).animate({
        "left": "0px",
            "top": "0px"
    }, 1500);
    $('.content').fadeOut(1000);
}

请帮我找到解决方案，因为这很烦人。 我浏览过类似的主题，但它们要么不提供答案，要么与我不使用的背景定位有关。

Answer 1

Firefox不允许您相对或更准确地定位display: table-cell元素display: table-cell 。 一种解决方法是将td元素设置为其他display值，例如inline-block ：

http://jsfiddle.net/JzRLN/4/

虽然这可能会弄乱页面的其他格式。 实际上，对于这种用法，表并不是最好的主意。

Answer 2

Gecko / Firefox不支持表格单元的相对位置。 因此，使用您当前的标记，根本无法进行这项工作。 请改用定位的DIV，它将正常工作。