Question

请记住，我对编码非常陌生，并试图淡入并淡出一些图片。当我在控制台中键入fadeOut（）时，“叠加”会消失。但是，当我在控制台中键入fadeIn（）时，没有任何反应。

<html>
<head>
<title>Weather</title>
<style>
    body{
        margin: 0 auto;
        width: 800px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: black;
    }
        body.CLEAR_DAY {background-image: url(Clear_Day.jpg);}
        body.PARTLY_CLOUDY_DAY {background-image: url(Sun.jpg);}
        body.FOG {background-image: url();}
        body.SNOW {background-image: url();}
        body.WIND {background-image: url();}
        body.PARTLY_CLOUDY_NIGHT {background-image: url();}
        body.RAIN {background-image: url();}
div.box{
  width:600px;
  height:650px;
  margin:30px 50px;
  background:#3399FF;
      border-bottom: 6px solid #000;
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  border-radius: 0px 0px 50px 50px; 
  border-top:6px solid #000;
  -moz-border-radius:50px 50px;  
  -webkit-border-radius:50px 50px; 
  float:left;
  /*padding:10px;*/
  text-align: center;
  position:relative;
  }
div.box h1
  {
  margin: 0 auto;
  font-weight:bold;
  color:#000;
  font-size:75px;
  text-align: center;
  }
  div.box h2
  {
  margin: 0 auto;
  font-weight:bold;
  color:#000;
  font-size:40px;
  text-align: center;
  }
  div
{
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:0px 20px 0px 20px;
}
div.CLEAR_DAY
{
    background-image: url();
    background-position: center;
    background-repeat: no-repeat;
}
div.box canvas
{
  position:absolute;
  top:325px;
  margin-top:-100px;
  left:40px;
}
#overlay
{
    background-color: red;
    opacity:1;
    width:100%;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
}
</style>
</head>
<body onload="updateWeatherDisplay()">
<div id="overlay"></div>
<div id="box" class="box">
<select id="choice" onchange="updateWeatherDisplay()">
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday" selected>Friday</option>
    <option value="Saturday">Saturday</option>
    <option value="Sunday">Sunday</option>
</select>
<h1 id="day"></h1>
<h2 id="temperature"></h2>
<canvas id="condition" width="600" height="300"></canvas>
</div>
<script src="skycons.js"></script>
<script>
var skycons = new Skycons({"color": "black"});
skycons.add("condition", Skycons.CLEAR_DAY);
skycons.play();
var temperatures=["127&#176;","34&#176;","79&#176;","-183&#176;","0&#176;","91&#176;","213&#176;"];
var icons=[Skycons.WIND,Skycons.PARTLY_CLOUDY_NIGHT,Skycons.RAIN,Skycons.CLEAR_DAY,Skycons.PARTLY_CLOUDY_DAY,Skycons.FOG,Skycons.SNOW];
var backgrounds=["WIND","PARTLY_CLOUDY_NIGHT","RAIN","CLEAR_DAY","PARTLY_CLOUDY_DAY","FOG","SNOW"];

function fadeOut()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity>0){
overlay.style.opacity = opacity - 0.01
setTimeout(fadeOut,10);
}
}
function fadeIn()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity<1){
overlay.style.opacity = opacity + 0.01
setTimeout(fadeIn,10);
}
}
function updateWeatherDisplay()
{
var selectedDay = document.getElementById("choice").selectedIndex;
var daysOfTheWeek = document.getElementById("choice").options;
document.getElementById("day").innerHTML = daysOfTheWeek[selectedDay].text;
document.getElementById("temperature").innerHTML = temperatures[selectedDay];
skycons.set("condition", icons[selectedDay]);
document.getElementsByTagName("body")[0].className=backgrounds[selectedDay];
}
</script>
</body>
</html>

我也是为了好玩而做这个项目。提前谢谢！

Answer 1

问题是当你从DOM中检索它时，opacity是一个字符串 - 只需将一元+添加到overlay.style.opacity = opacity + 0.01，只需将其更改为整数（嗯，浮动，真的）。 1}}行。或者甚至更好，使用parseFloat：

overlay.style.opacity = parseFloat(opacity) + 0.01

有关示例，请参阅this JSBin（只需点击预览即可显示和隐藏叠加层）。

它适用于fadeOut，因为动态转化规则可以使'12' + 1 === '121'同时'12' - 1 === 11。它不一致，但这就是它的工作原理。

Answer 2

您需要清除超时功能

试试这个，

JsFiddle

var skycons = new Skycons({"color": "black"});
skycons.add("condition", Skycons.CLEAR_DAY);
skycons.play();
var temperatures=["127&#176;","34&#176;","79&#176;","-183&#176;","0&#176;","91&#176;","213&#176;"];
var icons=[Skycons.WIND,Skycons.PARTLY_CLOUDY_NIGHT,Skycons.RAIN,Skycons.CLEAR_DAY,Skycons.PARTLY_CLOUDY_DAY,Skycons.FOG,Skycons.SNOW];
var backgrounds=["WIND","PARTLY_CLOUDY_NIGHT","RAIN","CLEAR_DAY","PARTLY_CLOUDY_DAY","FOG","SNOW"];

function updateWeatherDisplay()
{
var selectedDay = document.getElementById("choice").selectedIndex;
var daysOfTheWeek = document.getElementById("choice").options;
document.getElementById("day").innerHTML = daysOfTheWeek[selectedDay].text;
document.getElementById("temperature").innerHTML = temperatures[selectedDay];
skycons.set("condition", icons[selectedDay]);
document.getElementsByTagName("body")[0].className=backgrounds[selectedDay];
}

function fadeOut()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity>0){
    console.log('fadeout')
overlay.style.opacity = opacity - 0.01
window.myVar = setTimeout(fadeOut,10);
}
    else{
        console.log('error')
    clearTimeout(myVar)
    }
}
function fadeIn()
{
var overlay=document.getElementById("overlay");
var style = window.getComputedStyle(overlay);
var opacity=style.getPropertyValue("opacity");
if(opacity<1){
    clearTimeout(myVar)

overlay.style.opacity = parseFloat(opacity) + 0.01
console.log(overlay.style.opacity)
myVar1 = setTimeout(fadeIn,10);
}

}


$('#click1').click(function(){

fadeOut()
});
$('#click2').click(function(){
    alert('')
fadeIn()
});

Answer 3

您可以使用jquery fadeToggle。所以它非常简单易用。像这样：

$( "button:first" ).click(function() {
  $( "p:first" ).fadeToggle( "slow", "linear" );
});

Check this jquery Function !

Answer 4

在添加数据时，必须使用pareFloat（）将不透明度值从字符串解析为float。

FadeIn FadeOut错误

4 个答案: