作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在开发一个使用复选框来显示图像和删除图像的页面。我有添加图像和删除图像部分工作。我只是无法让图像淡入和淡出 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 在这里添加图像 url。此外,div 贴图应该淡入淡出,但由于某种原因它在 fiddle 中不起作用。在我的开发箱上运行良好。
最佳答案
请试试这个。
$(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');
});
});
关于javascript - 如何让 div 框淡入和淡出 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31508402/
我是一名优秀的程序员,十分优秀!