[英]How do I get a div Box to fade in and out of a div
我目前在这里使用的是一个使用复选框显示图像和删除图像的页面。 我有添加图像并删除图像部分的工作。 我只是无法使图像淡入淡出div。 有人可以帮忙吗?
<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
right: -780px;
width: 200px;
height: 200px;
display: none;
background: url(tn_bandannatop.png) 0 0;
}
#station_A { top: 5px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
<div id="map" >
<span id="station_A" class="overlay"><img src="/tn_WhiskersPrinceworkup.png"></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
</form>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$("input[type='checkbox']").change(function() {
var state = $(this).val();
//
$("#"+state).toggleClass("overlay");
});
$(document).ready(function(){
$('#checkbox1').change(function(){
if(this.checked)
$('#map').fadeIn('slow');
else
$('#map').fadeOut('slow');
});
});
</script>
</body></html>
小提琴在这里
UPDATE:更新的小提琴在此处添加了图像网址。 同样,div地图应该淡入和淡出,由于某种原因,它在小提琴中不起作用。 在我的devbox上工作正常。
请尝试这个。
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function () {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.