我不是最精通编码的，几天来一直在努力让这个功能正常工作，希望有人能帮助我……
这个想法是让红色 div 默认显示，通过按“淡入淡出 1”和“淡入淡出 2”按钮调用蓝色/黄色 div。当按下任一按钮时，红色 div 将被隐藏并且不会被调用。
当前代码在连续按下按钮时出现错误，它们要么不显示，淡入淡出效果不起作用，要么出现红色 div。
谢谢!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.myBtn
{
width:80px;
}
#myImg0
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:red;
width: 100px;
height: 100px;
}
#myImg1
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:blue;
width: 100px;
height: 100px;
}
#myImg2
{
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
position:absolute;
background-color:yellow;
width: 100px;
height: 100px;
}
#myImg1.fade-out
{
opacity:0;
}
#myImg1.fade-in
{
opacity:1;
}
#myImg2.fade-out
{
opacity:0;
}
#myImg2.fade-in
{
opacity:1;
}
.hide {display: none;}
</style>
<script type="text/javascript">
function fade1(btnElement) {
if (btnElement.value === "Fade Out") {
document.getElementById("myImg0").className = "fade-out";
document.getElementById("myImg2").className = "fade-out";
btnElement.value = "Fade In";
}
else {
document.getElementById("myImg1").className = "fade-in";
btnElement.value = "Fade Out";
}
}
function fade2(btnElement) {
if (btnElement.value === "Fade Out") {
document.getElementById("myImg0").className = "fade-out";
document.getElementById("myImg1").className = "fade-out";
btnElement.value = "Fade In";
}
else {
document.getElementById("myImg2").className = "fade-in";
btnElement.value = "Fade Out";
}
}
</script>
</head>
<body>
<input class="myBtn" type="button" value="Fade 1" onclick="fade1(myImg1);" />
<input class="myBtn" type="button" value="Fade 2" onclick="fade2(myImg2);" />
<div id="myImg0" ></div>
<div id="myImg1" class="hide" ></div>
<div id="myImg2" class="hide" ></div>
</body>
</html>
最佳答案
您可以像这样使用 jquery- jsFiddle
$(document).ready(function () {
$(".fade1").click(function () {
$("#myImg1").fadeToggle();
$("#myImg2").fadeOut();
});
});
$(document).ready(function () {
$(".fade2").click(function () {
$("#myImg2").fadeToggle();
$("#myImg1").fadeOut();
});
});
关于javascript - JavaScript/CSS 中的 Buggy 淡入/淡出代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15868285/