CSS 전환이 파이어 폭스에서 작동하지 않습니다.

Question

나는 CSS Transition not firing when adding class to body (Firefox)과 비슷한 문제가 있지만, 다른 방법으로 요소를 타겟팅하거나 클래스를 제거하는 방법을 찾을 수 있습니다. 여기

내가 무엇을 가지고 :

마크 업 :

   <div class="ball b40 first"> 
        <a class="ffx-fx" href="javascript:void(0)"> 

        </a> 
       </div> 

CSS :

.ffx-fx { 
-webkit-transition: all 1.5s ease-in-out; 
    -moz-transition: all 1.5s ease-in-out; 
    -o-transition: all 1.5s ease-in-out; 
    -ms-transition: all 1.5s ease-in-out; 
     transition: all 1.5s ease-in-out; 
} 
.b40 a   { 
width:220px; 
height:220px; 
background: url(../images/temp/1_a.jpg) center center; 
background-size: 100% 100% !important; 

}

.b40 .b40-rotated { 
width:220px; 
height:220px; 
background: url(../images/temp/1_b.jpg) center center !important; 

}

JS는 :

window.setInterval(function() { 
    $(".b40 .ffx-fx").toggleClass("b40-rotated"); 
}, 5000); 

Answer 1

난 당신이 전환과 배경 - 이미지를 전환 할 수 있다고 생각하지 않습니다. 적어도 나는 그것을 시도하지 않았다. 보통이 상황을 처리하는 방법에는 두 개의 내부 div가 있습니다. 하나는 on hover 클래스이고 다른 하나는 off 클래스입니다. 그 다음 마우스를 올리면 불투명도가 변경됩니다. 불투명도 전환이 작동합니다. 이 같은 SOOO 뭔가 ...

HTML

<div class="container"> 
    <a href=""> 
    <div class="off_state"></div> 
    <div class="on_state"></div> 
</a> 
</div> 

CSS

.container{position:relative;} 
.off_state, .on_state{ 
    position:absolute; 
    top:0; 
    left:0; 
    transition: all 1s; 
} 
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);} 
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);} 

그것은 거친 버전입니다,하지만 난 항상 그것을 한 적이 방법입니다.

참고 : jQuery UI에는 클래스를 천천히 추가 할 수도 있습니다. 여기에서 볼 수 있습니다 : http://jqueryui.com/addClass/. 아마도 사용하기가 더 쉬울 것입니다.