Question

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

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

简单的任务是能够点击页面上的任何地方并让按钮淡出（我也尝试过fadeOut）并显示图像。

我对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);
            });
});

Answer 1

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

结帐http://jsfiddle.net/uGEVr/1/

Answer 2

jQuery之前/之上的jQuery文件。

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

一旦切换这两个fadeTo工作得很好。

.fadeTo不工作，绝对位置

2 个答案: