.fadeTo не работает, позиция абсолютная

У меня есть кнопка, позиция абсолютная / 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);
            });
});
Источник

2 ответа 

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

проверить http://jsfiddle.net/uGEVr/1/

Источник

JQuery до / выше файла JavaScript.

кажется, что простым ответом было убедиться, что ссылка на файл jQuery была перед / над ссылкой на файл.js.

однажды поменял эти две штуки на fadeTo работал отлично.

Источник
Другие вопросы по тегам