jQuery 动画。显示无 css 没有改变答案

【问题标题】：Jquery animate. Display none css is not changingjQuery 动画。显示无 css 没有改变
【发布时间】：2012-10-04 23:10:19
【问题描述】：

在第一次加载页面时，图像必须display:none。但问题是，当我放 display none 时，动画功能不起作用，我已经放了 .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 样式，它可以工作，但是当页面首次加载时，图像正在显示。我需要在第一次加载时隐藏它，然后在悬停时它会显示。

【问题讨论】：

标签： jquery

【解决方案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.

【讨论】：

很好的答案。我想我需要更多地了解 jquery :) 谢谢

【解决方案2】：

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

等

改变

$("img.fade").hover(

到

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

/E:

并删除样式

【讨论】：