Jquery 动画。显示无 css 没有改变

Question

在页面第一次加载时，图像必须显示:无。但问题是，当我设置“不显示”时，动画功能不起作用，而且我已经设置了 .css({'display':'block'}) 仍然不起作用。

这是我的代码

<script type="text/javascript">
    $(document).ready(function() {
        $("img.fade").hover(function() {
            $(this).stop().animate({ "opacity": "1" }, 300);
            $(this).css({ 'display': 'block' });
        }, function() {
            $(this).stop().animate({ "opacity": "0" }, 300);
        });
    });
</script>
<style type="text/css">
    img.fade { display:none }
</style>
<img src="image.jpg" class="fade" />

如果我删除 display:none 样式，它可以正常工作，但是当页面首次加载时，图像就会显示。我需要在第一次加载时隐藏它，然后悬停时它会显示。

Answer 1

如果某些内容被隐藏，您将无法将鼠标悬停在其上，因为它不占用页面空间。相反，最初将其不透明度设置为0。删除 CSS，您可以执行以下操作:

$(document).ready(function() {
    $("img.fade").hover(function() {
        $(this).stop().animate({ opacity: 1 }, 300);
    }, function() {
        $(this).stop().animate({ opacity: 0 }, 300);
    }).css({ opacity: 0 });
});

You can test it out here 。或者，删除 .css({ opacity: 0 }); 并将 CSS 更改为:

img.fade { opacity: 0; filter: alpha(opacity=0); }

You can test that version here .