Jquery动画。显示none none css不会改变

Question

在页面第一次加载时，图片必须显示：无。但问题是，当我把显示器设置为none时，animate函数不起作用，我已经将.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" /> 

如果我删除显示：无的风格，这是工作，但是当第一次加载页面，图像显示。我需要在第一次加载时隐藏它，然后当它悬停时它会显示。

Answer 1

如果隐藏了某些东西，则无法将其悬停在其上，因为它在页面中不占用空间。最初将其设置为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); } 

You can test that version here。

Answer 2

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

等

变化

$("img.fade").hover(

到

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

/E：

，并删除风格