왜이 jQuery 스 니펫은 전에 한 번 애니메이션을 적용하지 않습니까?

Question

이 jQuery 스 니펫이 처음으로 실행되지 않는 이유는 무엇입니까? 처음 상상할 때 움직이는 것처럼 보이지 않습니다. 요소에 바인딩하는 것과 관련이 있습니까?

$(document).ready(function(){ 
    if(!($.browser.safari || $.browser.chrome)){ 
     $('.boxgrid').hover(function(){ 
      $(".boxcaption", this).animate({opacity:'1'},{duration:200}); 
     }, function() { 
      $(".boxcaption", this).animate({opacity:'0'},{duration:350}); 
     }); 
    } 
}); 

여기에 해당하는 CSS가 있습니다.

.boxcaption{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    -webkit-transition: opacity 0.35s linear; 
    background-color: rgba(0,0,0, 0.8); 
    opacity: 0; 
} 
.boxgrid:hover .boxcaption{ 
    -webkit-transition: opacity 0.1s linear; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    opacity: 1; 
} 

Answer 1

마우스 아웃이 될 때까지 이미 100 % 불투명하므로 애니메이션이 적용되지 않습니다. 이 시도 :

$(document).ready(function(){ 
    if(!($.browser.safari || $.browser.chrome)){ 

     // Hide .boxcaption 
     $('.boxgrid .boxcaption').css({'opacity':0}); 

     $('.boxgrid').hover(function(){ 
      $(".boxcaption", this).animate({opacity:'1'},{duration:200}); 
     }, function() { 
      $(".boxcaption", this).animate({opacity:'0'},{duration:350}); 
     }); 
    } 
}); 

http://jsfiddle.net/Madmartigan/SXX2D/

편집이 : 지금 당신의 CSS를보고, 당신은 아마 렌더링에 약간의 지연이 발생하고 있습니다. 견고한 배경으로 시도해보세요. FF4에서와 같은 방식으로 나에게 잘 어울립니다.

Answer 2

처음으로 마우스를 가리면 애니메이션이 적용되지 않습니다 (CSS에 display: none으로 설정하지 않은 경우).

jsFiddle.

Answer 3

귀하의 페이지에 CSS 코드 아래 추가

.boxgrid .boxcaption { 
    display: none; 
}