Question

我正在通过制作交互式日落来练习使用.animate和其他视觉技巧。我有所有的图像，除了绝对定位的山。我想点击太阳触发日落。相反，日落加载动画会运行，但点击会导致无操作。我也尝试在太阳周围做一个div并点击它。我在找到问题时无法找到解决方案。

我已经加载了jquery和bootstrap。

HTML

<div id="everything">
    <img id="sunset" src="sunset1.jpg" class="img-responsive" alt="Responsive image">
    <img id="sun" src="sun1.png" class="img-responsive" alt="Responsive image">
    <img id="mountains" src="mountains.png" class="img-responsive" alt="Responsive image">
    <img id="space" src="space5compressed.jpg" alt="">
</div>

CSS

body {
    display: none;
}
html, body {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden; 
    background-color: black;
}
#sun {
    position: absolute;
    bottom: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 30%;
    width: auto;
    z-index: -1;
    display: none;
}
#sunset {
    position: absolute;
    bottom: 0px;
    z-index: -2;
    min-height: 100%;
}
#mountains {
    position: relative;
    bottom: -100%;
}
#space {
    position: absolute;
    left: -80%;
    bottom: -70%;
    min-height: 250%;
    min-width: 250%;
    max-height: 250%;
    max-width: 250%;
    z-index: -1;
    opacity: 0.0;
    /* Spinning space effect*/
    -webkit-animation:spin 80s linear infinite;
    -moz-animation:spin 80s linear infinite;
    animation:spin 80s linear infinite;
}

    /* More spinning space effect*/
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#everything {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: black;
}

的Javascript

$(document).ready(function() {

$("body").fadeIn(8000);

$("#sun").fadeIn(8000);

$( "#mountains" ).delay( 2000 ).animate({
    marginTop: "-25%",
}, 6000 );

$("#sun").on("click", function(){

    $( "#sun" ).animate({
        marginBottom: "-300px",
    }, 8000, "linear" );

    $( "#sunset, #sun" ).delay( 10000 ).animate({
        opacity: 0.0,
    }, 5000 );

    $( "#space" ).delay( 14000 ).animate({
        opacity: 4.0,
    }, 20000 );

});

});

的jsfiddle

http://jsfiddle.net/0wwapsLw/3/

Answer 1

您在脚本中使用了body而不是'body'。它现在有效：

$('body').on("click", function(){

    $( "#sun" ).animate({
        marginBottom: "-300px",
    }, 8000, "linear" );

    $( "#sunset, #sun" ).delay( 10000 ).animate({
        opacity: 0.0,
    }, 5000 );

    $( "#space" ).delay( 14000 ).animate({
        opacity: 4.0,
    }, 20000 );

});

http://jsfiddle.net/0wwapsLw/2/

Answer 2

您需要将#sun的z-index设置为999，因为其他元素位于与其重叠的相同位置（因为它位于绝对位置）

所以你的课应该是这样的：

#sun {
    position: absolute;
    bottom: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 30%;
    width: auto;
    z-index: 999;
    display: none;
}

JS代码：

$(document).on('click', '#sun',function(){
    $('#sun').css('z-index',-1);
    $( "#sun" ).animate({
        marginBottom: "-300px",
    }, 8000, "linear" );

    $( "#sunset, #sun" ).delay( 10000 ).animate({
        opacity: 0.0,
    }, 5000 );

    $( "#space" ).delay( 14000 ).animate({
        opacity: 4.0,
    }, 20000 );

});

Working Fiddle

Answer 3

我偶然发现了解决方案。 V31遇到了这个问题，虽然我还不太清楚为什么会这样。也许并不重要的是山脉是一个更高的z指数，因为它是位置相对的，我所要做的就是在HTML文档中移动空间，这是一个比太阳更高的z指数。如果有人想扩大解释，请做，但这是一个有效的解决方案，可以保持点击太阳和山后的太阳。

<div id="everything">
  <img id="sunset" src="sunset1.jpg" class="img-responsive" alt="Responsive image">
  <img id="space" src="space5compressed.jpg" alt="">
  <img id="sun" src="sun1.png" class="img-responsive" alt="Responsive image">
  <img id="mountains" src="mountains.png" class="img-responsive" alt="Responsive image">
</div>

单击不在位置绝对图像上触发

3 个答案: