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的元素。一种解决方法是将td元素设置为其他display值，例如inline-block：

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

虽然这可能会破坏页面的其他格式。实际上，表格并不是这种用法的最佳选择。

Answer 2

Gecko / Firefox不支持表格单元格的相对定位。因此，使用您当前的标记，根本无法使其工作。使用定位的DIV代替，它会正常工作。

jQuery动画在Firefox中不起作用

2 个答案: