爲什麼這個jQuery代碼片段在它之前沒有動畫一次？

爲什麼這個jQuery片段似乎不是第一次運行？當我第一次徘徊時，它似乎沒有動畫。它是否與綁定元素有關？爲什麼這個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; 
}

來源

2011-04-25 michael

你可以分享你的HTML源代碼？ – 2011-04-25 03:36:22

似乎很適合我。也許如果你提供的HTML也會顯示問題。 .boxcaption最初是隱藏的（不透明度：0）嗎？ – 2011-04-25 03:38:36

它不動畫，因爲它已經在100％不透明度，直到你mouseout。試試這個：

$(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上看起來很好。

來源

2011-04-25 03:37:17

如果您是瀏覽器嗅探，那麼使用javascript隱藏div更有意義，因爲如果您使用CSS並且瀏覽器在您的js代碼中不受支持，它將保持「隱藏」狀態。 – 2011-04-25 03:45:27

也許它是更多的與CSS而不是jQuery。 – michael 2011-04-25 03:57:01

這取決於。您是否希望在啓用javascript時隱藏.boxcaption？如果是這樣，使用CSS來隱藏它。如果沒有，請使用javascript。 – 2011-04-25 03:58:30

當你第一次將鼠標懸停在它上面時，不應該設置動畫效果（除非你已經將它設置爲在CSS中有display: none）。

jsFiddle。

來源

2011-04-25 03:37:55 alex

添加以下CSS代碼添加到網頁：

.boxgrid .boxcaption { 
    display: none; 
}

來源

2011-04-25 03:39:30

爲什麼這個jQuery代碼片段在它之前沒有動畫一次？

回答

相關問題