Jquery动画。显示none none css不会改变
问题描述:
在页面第一次加载时,图片必须显示:无。但问题是,当我把显示器设置为none时,animate函数不起作用,我已经将.css({'display':'block'})仍然无法工作。
Jquery动画。显示none none css不会改变
这里是我的代码
<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" />
如果我删除显示:无的风格,这是工作,但是当第一次加载页面,图像显示。我需要在第一次加载时隐藏它,然后当它悬停时它会显示。
答
如果隐藏了某些东西,则无法将其悬停在其上,因为它在页面中不占用空间。最初将其设置为opacity
。删除你的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); }
答
$(this).css({'display':'block'}); == $(this).show();
$(this).stop().animate({"opacity": "0"}, 300); == $(this).fadeOut(300);
等
变化
$("img.fade").hover(
到
$("img.fade").hide().hover(
/E:
,并删除风格
很好的回答。我想我需要更多地了解jquery :)谢谢 – Jorge 2010-10-24 17:26:28