Javascript 单击位置绝对图像上的“不点火”

我正在通过制作交互式日落来练习使用动画和其他视觉技巧。我有所有的图像，除了山。我试图让点击太阳触发日落。相反，日落加载动画会运行，但单击不会导致任何操作。我还试着绕着太阳俯冲，然后点击它。我找不到解决这个问题的办法

我已经加载了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>

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

---

您在脚本中使用了

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 );

});

---

您需要将#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 );

});

---

我偶然发现了解决办法。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>

对不起，我的JSFIDLE应该像我的问题一样说（“#sun”）。我要确保click在身体上起作用，确实如此。我的代码在（“#sun”）上不起作用。太阳需要落在山后，所以这不起作用。@Goose:更新了答案，现在太阳落在山后了……正如现在在点击事件后处理的z-index一样，我发布了我自己问题的答案，有点干燥，但我仍然不明白为什么它会起作用。你似乎比我更了解z指数。为什么HTML文档中的顺序会影响z索引。z-index不是绝对的吗？@Goose z-index是在层上工作的。由于您将其设置为-1，它将位于其他元素的下方，而单击不会发生，因为其他元素位于其上方。现在我所做的是增加z指数，使它相对于其他元素位于层之上。单击发生了，在单击之后不久，我将z索引更改为-1，使其再次低于其他元素。希望这个答案是令人信服的，如果是的，请将上面的答案标记为您的答案，然后问题是在点击发生之前，太阳应该部分位于山的后面。我仍然不明白为什么在文档中移动太阳上方的空间可以清除单击它？在z指数方面，相对和绝对之间是否存在差异？