问题描述
在页面的第一次加载中,图像必须显示:无.但是问题是,当我不显示任何内容时,动画功能不起作用,并且我已经放置了 .css({'display':'block'})仍然不起作用.
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.
这是我的代码
<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 样式,则该样式有效,但是在首次加载页面时,则显示图像.我需要在第一次加载时将其隐藏,然后将其悬停时才会显示.
If I remove the display:none style, 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.
推荐答案
如果隐藏了某些内容,则不能将其悬停在该页面上,因为它在页面中不占空间.取而代之的是将其opacity
最初设置为0.删除CSS,您可以执行以下操作:
If something's hidden you can't hover over it, since it occupies no space in the page. Instead set it's opacity
to 0 initially. Remove your CSS and you can do this:
$(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更改为此:
You can test it out here. Or, remove .css({ opacity: 0 });
and change your CSS to this:
img.fade { opacity: 0; filter: alpha(opacity=0); }
这篇关于jQuery动画.不显示css不变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!