单击＃锚点时淡入/淡出div元素

Question

I am trying to get different divs to fade in and out when I click a image with a <a href> in it and # to make it fade in and out. I can not get it to fade in and out no matter what I try. This is my 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 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> 

I've researched this thoroughly and can not get it to work.

UPDATE: I did Include Fiddle but it got removed here is the fiddle

UPDATE: Updated Fiddle with fixed for the id.

Answer 1

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

Also you can fade out and fade in target parent div element for flashing thing.

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

Try this 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/