Question

在第一次加载页面时，图片必须显示：无。但问题是，当我将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 });
});

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

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

You can test that version here

Answer 2

$(this).css({'display':'block'}); == $(this).show();
$(this).stop().animate({"opacity": "0"}, 300); == $(this).fadeOut(300);

等

更改

$("img.fade").hover(

到

$("img.fade").hide().hover(

/ E：

删除样式

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

2 个答案: