jQuery 动画。显示无 css 没有改变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4009375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery animate. Display none css is not changing
提问by Jorge
In the first load of the page the image have to display:none. But the problem is, when I put display none, the animate function is not working and I already put a .css({'display':'block'})still not working.
在页面的第一次加载中，图像必须显示：none。但问题是，当我放置 display none 时，animate 函数不起作用，我已经放置了.css({'display':'block'})仍然不起作用。
Here is my code
这是我的代码
<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" />
If I remove the display:nonestyle, it is working but when the page first loads, image is showing. I need to hide it in the first load then when hovering it will show.
如果我删除display:none样式，它正在工作，但是当页面第一次加载时，图像正在显示。我需要在第一次加载时隐藏它，然后在悬停时它会显示。
回答by Nick Craver
If something's hidden you can't hover over it, since it occupies no space in the page. Instead set it's opacityto 0 initially. Remove your CSS and you can do this:
如果某些东西被隐藏了，你不能将鼠标悬停在它上面，因为它不占用页面中的空间。相反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. Or, remove .css({ opacity: 0 });and change your CSS to this:
你可以在这里测试一下。或者，删除.css({ opacity: 0 });您的 CSS 并将其更改为：
img.fade { opacity: 0; filter: alpha(opacity=0); }
回答by Misiur
$(this).css({'display':'block'}); == $(this).show();
$(this).stop().animate({"opacity": "0"}, 300); == $(this).fadeOut(300);
etc
等等
Change
改变
$("img.fade").hover(
to
到
$("img.fade").hide().hover(
/E:
/E:
And remove style
并删除样式
