Javascript 为什么这个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;
}

---

它不会设置动画，因为在鼠标移出之前，它已经处于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});
        });
    }
});

---

编辑：现在看到CSS，您可能只是在渲染过程中遇到了一些延迟。尝试使用纯色背景，我觉得它在FF4上的样子很好。

它不会动画，因为在鼠标移出之前，它已经是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});
        });
    }
});

---

编辑：现在看到CSS，您可能只是在渲染过程中遇到了一些延迟。请尝试使用坚实的背景，我觉得它在FF4上的样子很好。

当您第一次将鼠标悬停在它上面时，它不应该设置动画（除非您将它设置为在CSS中的某个位置显示

display:none

）

---

.

当您第一次将鼠标悬停在它上面时，它不应该设置动画（除非您在CSS中的某个位置将其设置为具有

显示：无
）

.
在页面中添加以下CSS代码：

.boxgrid .boxcaption {
     display: none;
}

将以下CSS代码添加到您的页面：

.boxgrid .boxcaption {
     display: none;
}

你能分享你的html源代码吗？对我来说似乎很好。如果您也提供html，可能会显示问题所在。.boxcaption一开始是隐藏的吗（不透明度：0）？你能分享你的html源代码吗？对我来说似乎很好。如果您也提供html，可能会显示问题所在。.boxcaption一开始是隐藏的吗（不透明度：0）？如果你是浏览器嗅探，用javascript隐藏div会更有意义，因为如果你使用CSS，而js代码不支持浏览器，div将保持
隐藏。是否希望在启用javascript时隐藏.boxcaption？如果是这样，请使用CSS将其隐藏。如果没有，请使用javascript。也许我第一次看到它不起作用的原因是CSS比JS快。所以，也许我需要防止psudo:在非wekit浏览器上悬停。好吧，如果你取消注释我添加的行，它会正确地设置动画。我不确定这里有什么问题，它对我来说很好。GL.如果您正在进行浏览器嗅探，则使用javascript隐藏div更有意义，因为如果您使用CSS并且js代码中不支持浏览器，则div将保持
隐藏状态。是否希望在启用javascript时隐藏.boxcaption？如果是这样，请使用CSS将其隐藏。如果没有，请使用javascript。也许我第一次看到它不起作用的原因是CSS比JS快。所以，也许我需要防止psudo:在非wekit浏览器上悬停。好吧，如果你取消注释我添加的行，它会正确地设置动画。我不确定这里有什么问题，它对我来说很好。德国劳埃德船级社。