.fadeTo 不工作，绝对定位答案

【问题标题】：.fadeTo not working, position absolute.fadeTo 不工作，绝对定位
【发布时间】：2014-02-24 06:30:36
【问题描述】：

我有一个按钮，位置绝对/z-index 1，覆盖页面 100%。

有一个图像也是绝对位置，覆盖页面 100%，z-index 0。

简单的任务是能够单击页面上的任意位置并使按钮淡出（我也尝试过淡出）并显示图像。

我对 jQ 和 js 还很陌生，但是我一直在寻找答案，但找不到任何符合这种行为的东西。

<!doctype html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="sf.css">

<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>  
    <button type="button" class="bttn">HAPPY!</button>
    <div class="img">
        <img src="damonSF.jpg">
    </div>
</body>
<script type="text/jscript" src="sf.js"></script>
<script src="jquery.js"></script>

</html>


img{
position:absolute;
width:100%;
height:100%;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
}

button{
position:absolute;
opacity:1.0;
width:100%;
height:100%;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
}



$(document).ready(function(){

$('.bttn').click(function(){

    $('.bttn').fadeTo('fast', 0.0);
            });
});

【问题讨论】：

标签： javascript fadeto

【解决方案1】：

$('.bttn').click(function () {
  $('.bttn').fadeTo( "slow" ,0.1);
});

查看http://jsfiddle.net/uGEVr/1/

【讨论】：

感谢您的回答和链接，但是在 Chrome 和 Safari 中测试时仍然没有任何改进。

【解决方案2】：

jQuery 之前/之上的 javascript 文件。

看起来简单的答案是确保指向 jQuery 文件的链接位于指向 .js 文件的链接之前/之上。

一旦在 fadeTo 周围切换这两个效果很好。

【讨论】：