Jquery动画.显示没有css没有变化

Question

在页面的第一次加载中,图像必须显示:none.但问题是,当我将display none设置为无效时,animate函数不起作用,而且我已经放置了.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

如果隐藏的东西你不能将鼠标悬停在它上面,因为它在页面中不占用任何空间.而是opacity最初将其设置为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 });
});

你可以在这里测试一下.或者,删除.css({ opacity: 0 });并更改您的CSS:

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

你可以在这里测试那个版本.