我目前正在使用复选框来显示图像和删除图像。我有添加图像并删除图像部分工作。我只是无法让图像淡入和淡出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>
Fiddle 就在这里
更新:已更新 fiddle 此处添加了图片网址。 div图也应该淡入淡出,因为某种原因它不能在小提琴中工作。在我的devbox上工作得很好。
答案 0 :(得分:0)
请尝试此操作。
$(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');
});
});