jQuery动画.不显示css不变 [英] Jquery animate. Display none css is not changing

问题描述

在页面的第一次加载中，图像必须显示:无.但是问题是，当我不显示任何内容时，动画功能不起作用，并且我已经放置了 .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不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！