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代码添加到您的页面：

.boxgrid .boxcaption {
     display: none;
}

Answer 3

当你第一次将鼠标悬停在它上面时，不应该设置动画（除非你已经在CSS中将其设置为display: none）。

jsFiddle

为什么这个jQuery片段在它之前没有动画？

3 个答案: