当我点击其中带有<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>
我对此进行了彻底的研究,无法让它发挥作用。
更新:我做了包括小提琴,但这里删除的是 fiddle
更新:更新了 Fiddle,其中包含固定的ID。
答案 0 :(得分:1)
您必须删除文档加载之外的触发点击功能。因为你在body元素中添加了jquery lib。
此外,您可以淡出并淡入目标父div元素以进行闪烁。
$(document).on('click', '#triggerButton', function(e) {
e.preventDefault();
$('#firstscreen').fadeOut('fast', function () {
$(e.toElement.parentElement).fadeOut().delay(200).fadeIn();
});
});
试试这个小提琴: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()
});
});