为什么这个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代码片段在它之前没有动画一次？

回答

相关问题