javascript - Fade In/out div elements when a # anchor is clicked -

i trying different divs fade in , out when click image <a href> in , # make fade in , out. can not fade in , out no matter try. code:

$(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 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 */       left: 0%;       /* whatever */       position: absolute;   }   #station_b {       top: 0%;       /* whatever */       left: 0%;       /* whatever */       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 height , width of 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>

i've researched thoroughly , can not work.

update: did include fiddle got removed here fiddle

update: updated fiddle fixed id.

you must remove trigger click function outside of document load. because added jquery lib inside body element.

also can fade out , fade in target parent div element flashing thing.

$(document).on('click', '#triggerbutton', function(e) {     e.preventdefault();     $('#firstscreen').fadeout('fast', function () {         $(e.toelement.parentelement).fadeout().delay(200).fadein();     }); }); 

try fiddle: http://jsfiddle.net/alrf1clz/4/

update 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/