jQuery 애니메이션이 Firefox에서 작동하지 않습니다.

내 포트폴리오 용 웹 사이트를 만들고 있지만 애니메이션이 FireFox에서 작동하지 않습니다. 내 CSS와 스크립트를 통해 트롤링했는데 문제를 일으킬 수있는 오류를 찾을 수 없습니다. 내 코드는 FireFox를 제외한 다른 모든 브라우저에서 작동합니다. 애니메이션은 overlay td를 대각선으로 이동시키는 것을 의미하지만 FireFox에서는 그냥 앉아서 페이드 아웃합니다. 다음은 제 2 애니메이션 기능과 heres입니다 (jsfiddle).jQuery 애니메이션이 Firefox에서 작동하지 않습니다.

$('.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); 
}

해결책을 찾지 못하게 도와주세요. 비슷한 주제에 대해 둘러 보았지만 사용하지 않는 배경 위치 지정과 관련된 대답은 제공하지 않습니다.

출처

2014-01-20 Anonymous

나는 과거에는 파이어 폭스, 애니메이션 및 테이블에 문제가있었습니다. jquery에서 숨어서 표시하는 기능과 관련된 문제인 것처럼 보였습니다. 이 문제를 해결하기 위해 노력하는 대신, 이것을 표 형식 구조에서 DIV 묶음으로 변경하는 것이 좋습니다. 나는 항상 테이블을 사용하여 똥을 푸는 사람이 아니지만 이것이 DIV에 훨씬 더 적합한 상황 인 것처럼 보입니다. – rgbflawed

Gecko/Firefox는 표 셀의 상대 위치 지정을 지원하지 않습니다. 따라서 현재 마크 업을 사용하면이 작업을 수행 할 수 없습니다. 대신 위치가 지정된 DIV를 사용하면 잘 작동합니다.

출처

2014-01-20 15:49:34

td를 div로 변경하고 위치를 변경했습니다. 이제는 모두 완벽하게 작동합니다. 감사 –

Firefox는 표 셀을 상대적으로, 또는 더 정확하게는 display: table-cell 인 요소로 배치 할 수 없습니다. 한 가지 해결 방법은 inline-block 같은 다른 display 값에 td 요소를 설정하는 것입니다 :

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

이 것입니다 가능성이 엉망 페이지의 다른 형식 비록. 실제로, 테이블은이 사용법에 대한 최상의 아이디어가 아닙니다.

출처

2014-01-20 15:50:48

jQuery 애니메이션이 Firefox에서 작동하지 않습니다.

답변

관련 문제