javascript - 单击 anchor 时淡入/淡出 div 元素

Question

当我单击带有 <a href> 的图像时，我试图让不同的 div 淡入淡出。在里面和 # 让它淡入淡出。无论我尝试什么，我都无法让它淡入淡出。这是我的代码:

$(document).ready(function () {
    $("input[type='checkbox']").change(function () {
        var state = $(this).val();
        $("#" + state).toggleClass("overlay");
    });


    $('#triggerButton').click(function (e) {
        e.preventDefault();
        $('#firstscreen').fadeOut('fast', function () {
            $('#casualshirt').fadeIn('fast');
        });
    });
});

body {
     margin: 0;
     padding: 0;
 }
 #background {
     left: 0px;
     top: 0px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     width: 600px;
     height: 800px;
     overflow: hidden;
     z-index:0;
 }
 #Background {
     left: 0px;
     top: 0px;
     position: absolute;
     width: 600px;
     height: 800px;
     z-index:1;
 }
 #Layer1 {
     left: 24px;
     top: 16px;
     position: absolute;
     width: 285px;
     height: 762px;
     z-index:2;
 }
 #Rectangle1 {
     left: 34px;
     top: 59px;
     position: absolute;
     width: 260px;
     height: 512px;
     z-index:3;
 }
 #Layer6 {
     left: 339px;
     top: 541px;
     position: absolute;
     width: 98px;
     height: 116px;
     z-index:4;
 }
 #Shirts {
     left: 391px;
     top: 8px;
     position: absolute;
     width: 133px;
     height: 42px;
     z-index:5;
 }
 #Layer2 {
     left: 258px;
     top: 138px;
     position: absolute;
     width: 260px;
     height: 139px;
     z-index:6;
 }
 #Layer4 {
     left: 252px;
     top: 315px;
     position: absolute;
     width: 197px;
     height: 188px;
     z-index:7;
 }
 #Layer5 {
     left: 498px;
     top: 366px;
     position: absolute;
     width: 62px;
     height: 86px;
     z-index:8;
 }
 #Layer7 {
     left: 407px;
     top: 492px;
     position: absolute;
     width: 174px;
     height: 165px;
     z-index:9;
 }
 #Layer8 {
     left: 366px;
     top: 685px;
     position: absolute;
     width: 55px;
     height: 108px;
     z-index:10;
 }
 #Layer9 {
     left: 490px;
     top: 670px;
     position: absolute;
     width: 98px;
     height: 101px;
     z-index:11;
 }
 #Layer10 {
     left: 221px;
     top: 642px;
     position: absolute;
     width: 130px;
     height: 117px;
     z-index:13;
 }
 #Layer3 {
     left: 368px;
     top: 95px;
     position: absolute;
     width: 260px;
     height: 182px;
     z-index:14;
 }
 .overlay {
     display: none;
 }
 #map {
     /*right: -780px; removed for demo purposes */
     width: 285px;
     height: 762px;
     padding: 29px;
     background: url(http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png) no-repeat;
 }
 #station_A {
     top: 0%;
     /* whatever you like */
     left: 0%;
     /* whatever you like */
     position: absolute;
 }
 #station_B {
     top: 0%;
     /* whatever you like */
     left: 0%;
     /* whatever you like */
     position: absolute;
 }
 input[type=checkbox] {
     display:none;
 }
 input[type=checkbox] + label {
     background-image: url('/images/shirt_sprites.png');
     display: block;
     height: 72px;
     padding: 0;
     width: 72px;
 }
 #paradisetanktop + #paradisetanktop_s {
     background-position: 72 0;
 }
 #paradisetanktop:checked + #paradisetanktop_s {
     background-position: 0 0;
 }
 #bandanatop + #bandanatop_s {
     background-position: 0 0;
 }
 #bandanatop:checked + #bandanatop_s {
     background-position: 0 0;
 }
 button {
     background-image: url(images/Next.png);
     background-repeat: no-repeat;
     background-position: 50% 50%;
     /* put the height and width of your image here */
     height: 27px;
     width: 55px;
     border: none;
 }
 button span {
     display: none;
 }
 #casualshirt {
     width: 384px;
     height: 609px;
     left: 350px;
     background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
     position: absolute;
     display: none;
     z-index: 15;
 }
 #firstscreen {
     width: 384px;
     height: 609px;
     left: -30px;
     position: absolute;
     background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/firstscreen.png') no-repeat;
     z-index: 12;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <div id="firstscreen"></div>
  <div id="background">
  <div id="Background"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Background.png"></div>
  <div id="Layer1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer1.png"></div>
  <div id="map"></div>
  <div id="Rectangle1"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Rectangle1.png"></div>
  <div id="shirts">
      <div id="Shirts"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Shirts.png"></div>
      <div id="Layer2"><a href="#" id="triggerbutton"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer2.png"></div>
      <div id="Layer4"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer4.png"></div>
      <div id="Layer5"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer5.png"></div>
      <div id="Layer6"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer6.png"></div>
      <div id="Layer7"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer7.png"></div>
      <div id="Layer9"><a href="#" id="btn"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Next.png"></a></div>
      <div id="Layer10"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer10.png"></div>
      <div id="Layer3"><img src="http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/Layer3.png"></div>
      <div id="casualshirt"></div>
  </div>
  <div id="colors"></div>
  </div>

我已经对此进行了彻底的研究，但无法让它发挥作用。

更新:我做了 Include Fiddle 但它在这里被删除是 fiddle

更新:已更新 Fiddle固定为 id。

Answer 1

您必须在文档加载之外删除触发点击功能。因为你在 body 元素中添加了 jquery 库。

您还可以淡出和淡入目标父 div 元素以进行闪烁。

$(document).on('click', '#triggerButton', function(e) {
    e.preventDefault();
    $('#firstscreen').fadeOut('fast', function () {
        $(e.toElement.parentElement).fadeOut().delay(200).fadeIn();
    });
});

试试这个 fiddle :http://jsfiddle.net/aLrf1cLz/4/

更新 1:

CSS:

#casualshirt {
    top: 100px;
    width: 384px;
    height: 609px;
    background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
    position: absolute;
    display: none;
    z-index: 123123;
}

JS:

$(document).on('click', '#triggerButton', function(e) {
    e.preventDefault();
    $('#firstscreen').fadeOut('fast', function () {
        $(e.toElement.parentElement).fadeOut();
        $('#casualshirt').fadeIn()
    });
});

fiddle :http://jsfiddle.net/aLrf1cLz/8/