jQuery fadeTo基于一天中的时间

Question

我正在开发一个名为BitDay的开源项目，我刚刚在Reddit上开始。

我有12个元素作为CSS类，每个元素都有自己的背景图像。

现在，jQuery我已经获取时间，并根据时间应用类名的扩展，所以每2小时后台将改变

$(function() {
  $('.clock').hide();
  $('.music').hide();

  //Cache these for performance
  $h1 = $('h1');
  $h3 = $('h3');
  $body = $('body');

  //Sets the font size based on scale
  var setScale = function(elem, scaleFactor) {
    var scaleSource = $body.width(),
      maxScale = 500,
      minScale = 100; //Tweak these values to taste

    var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize < minScale) fontSize = minScale;

    elem.css('font-size', fontSize + '%');
  }

  //Resize fonts
  setScale($h1, .2);
  setScale($h3, .10);

  //Resize font based on windows size
  $(window).resize(function() {
    setScale($h1, .2);
    setScale($h3, .10);
  });

  //Check visited cookie
  var visited = $.cookie("visited")

  if (visited == null) {
    //Fade our title page into the real wallpaper.
    setTimeout(function() {

      //Set the background
      var d = new Date();
      var hour = d.getHours();
      var cssClass = getPicture(hour);

      //Made our waiting div the active div
      $('.bg-tobe').removeClass('bg-tobe').addClass('bg-' + cssClass);

      //Fade out the active and put it in a waiting state
      $('.bg-splash').fadeOut(function() {
        $('.bg-splash').removeClass('bg-splash').addClass('bg-tobe');
      });

      //Fade in the new bg and clock. Fade out the title
      $('.bg-' + cssClass).fadeIn();
      $('.title').fadeOut();

      updateClock();
      $('.clock').fadeIn();
      $('.music').fadeIn();
    }, 0);
  } else {
    //Set the background
    var d = new Date();
    var hour = d.getHours();
    var cssClass = getPicture(hour);

    //Made our waiting div the active div
    $('.bg-tobe').removeClass('bg-tobe').addClass('bg-' + cssClass);
    $('.bg-splash').removeClass('bg-splash').addClass('bg-tobe');

    //Fade in bg and fade out title
    $('.bg-' + cssClass).fadeIn('1000');
    $('.title').fadeOut('slow');

    //Set up clock and music
    updateClock();
    $('.clock').fadeIn('slow');
    $('.music').fadeIn('slow');
  }

  // set cookie
  $.cookie('visited', 'yes', {
    expires: 30,
    path: '/'
  });

  //Start updating the clock
  setInterval('updateClock()', 1000);

});

//Determines the picture to use based on the hour
function getPicture(hour) {
  if (hour >= 23 || hour <= 2)
    return 11;
  else if (hour >= 22)
    return 10;
  else if (hour >= 21)
    return 9;
  else if (hour >= 19)
    return 8;
  else if (hour >= 16)
    return 7;
  else if (hour >= 15)
    return 6;
  else if (hour >= 13)
    return 5;
  else if (hour >= 12)
    return 4;
  else if (hour >= 10)
    return 3;
  else if (hour >= 7)
    return 2;
  else if (hour >= 5)
    return 1;
  else
    return 0;
};

function updateClock() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var ampm = hours < 12 ? "AM" : "PM";

  //Formatting
  mins = ((mins < 10) ? "0" : "") + mins;
  hours = (hours > 12) ? hours - 12 : hours;
  hours = (hours == 0) ? 12 : hours;
  hours = ((hours < 10) ? "0" : "") + hours;

  var str = hours + ":" + mins + " " + ampm;

  //Set the new time
  var $clock = $('.clock h3');
  var oldStr = $clock.text();
  $clock.text(str);

  //Check if the hour has changed
  var oldHour = getMilitaryHour(oldStr);
  if (oldStr.length == 0) return;
  var currHour = d.getHours();
  if (currHour != oldHour) {

    //Change bgs
    var cssClass = getPicture(currHour);
    var oldClass = getPicture(oldHour);

    if (cssClass != oldClass) {

      //Make our waiting div the active div
      $('.bg-tobe').removeClass('bg-tobe').addClass('bg-' + cssClass);

      //Fade in the new bg
      $('.bg-' + cssClass).fadeIn('5000');

      //Fade out the active and put it in a waiting state
      $('.bg-' + oldClass).fadeOut(function() {
        $('.bg-' + oldClass).removeClass('bg-' + oldClass).addClass('bg-tobe');
      });
    }
  }
};

//Returns the military hour from a string formatted in standard time.
function getMilitaryHour(str) {
  var hour = parseInt(str.substring(0, 2));
  var ampm = str.substring(str.length - 2);

  if (ampm == 'PM' && hour != 12)
    return hour + 12;
  else if (ampm == 'AM' && hour == 12)
    return 0;
  else
    return hour;
}

#container {
    height: 100vh;
    position: relative;
}

.bg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 99;
    opacity: 0.7;
}


/* Change the background! */

.bg-0 {
    background-image: url("http://i.imgur.com/qexylYA.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-1 {
    background-image: url("http://i.imgur.com/cRvIYLJ.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-2 {
    background-image: url("http://i.imgur.com/UusvZC8.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-3 {
    background-image: url("http://i.imgur.com/URjIjZS.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-4 {
    background-image: url("http://i.imgur.com/Fy7kANa.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-5 {
    background-image: url("http://i.imgur.com/e2lvJ8q.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-6 {
    background-image: url("http://i.imgur.com/JEslGSe.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-7 {
    background-image: url("http://i.imgur.com/v2h0qzb.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-8 {
    background-image: url("http://i.imgur.com/xyfqUsX.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-9 {
    background-image: url("http://i.imgur.com/XbIlhvL.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-10 {
    background-image: url("http://i.imgur.com/xDAIc6P.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.bg-11 {
    background-image: url("http://i.imgur.com/kaCxCBi.png");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

<div id="container">
    <div class="bg-splash"></div>
    <div class="bg-tobe" style="display: none;"></div>
</div>

但是我不想检查小时并立即改变，而是希望这些图像在2小时内逐渐淡入其中。

例如，在早上7点说，bg-1应用100％不透明度。从这里开始，它会实时淡入bg-2。早上8点，bg-1将是50％不透明度，8：30 am 25％不透明度，依此类推。一直以来，bg-2将逐渐变得越来越明显。然后在上午9点，bg-1是0％不透明度，bg-2是100％不透明度，并且接下来的10个图像继续下去。它应该创造一个很好的封建过渡效果。

这是踢球者 - 因为这将成为超​​过数千名用户的开始屏幕，我们希望它能够记住任何给定时间的转换金额，因此如果用户在上午8:30登录，它将显示bg-1，不透明度为25％，掺入bg-2。

真的用这个来解决我的大脑，有人可以帮忙吗？

Answer 1

你走了！将2000ms更改为7200000，使其在2小时内缓慢淡出。也把它放在小提琴上：https://jsfiddle.net/pbfuauzg/3/

我一直在尝试setInterval()和fadeIn()持续时间之间的时差。目前，当fade()略短于setInterval函数（即500毫秒）时，我得到了最好的结果。请参阅下面的代码。

我还清理了你的CSS，因为你不必要地重复了很多代码。我现在可以吃饼干了吗：D？

请注意：您的脚本中每个背景之间的间隔不完全是2小时（例如，您有15：00h的背景和16：00h的背景）。为了使其完美地工作，您必须以2小时的间隔设置这些时间，而不是以1小时和3小时的间隔交替！

var timeBetweenBackgrounds = 2000; // in milliseconds - change this to 7200000 for 2 hours

var d = new Date();
var hour = d.getHours();
var bgNumber = getPicture(hour);

$(document).ready(function() {

  $('#backgroundOne').addClass('bg-' + bgNumber);

  setBackground();
  window.setInterval(setBackground, timeBetweenBackgrounds);

});

var activeBackground = bgNumber;
var activeDiv = 1;

function setBackground() {

  if (activeDiv == 1) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container One. Fading in container Two.');
    $('#backgroundTwo').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundOne').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 2;
    });

  }
  if (activeDiv == 2) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container Two. Fading in container One.');
    $('#backgroundOne').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundTwo').fadeOut((timeBetweenBackgrounds-500), function() {
      activeBackground = nextBackground;
      activeDiv = 1;
    });

  }

}


//Determines the picture to use based on the hour
function getPicture(hour) {
  if (hour >= 23 || hour <= 2)
    return 11;
  else if (hour >= 22)
    return 10;
  else if (hour >= 21)
    return 9;
  else if (hour >= 19)
    return 8;
  else if (hour >= 16)
    return 7;
  else if (hour >= 15)
    return 6;
  else if (hour >= 13)
    return 5;
  else if (hour >= 12)
    return 4;
  else if (hour >= 10)
    return 3;
  else if (hour >= 7)
    return 2;
  else if (hour >= 5)
    return 1;
  else
    return 0;
};

body {
  overflow: hidden;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
  opacity: 0.7;
}

.bg-0 {
  background-image: url("http://i.imgur.com/qexylYA.png");
}

.bg-1 {
  background-image: url("http://i.imgur.com/cRvIYLJ.png");
}

.bg-2 {
  background-image: url("http://i.imgur.com/UusvZC8.png");
}

.bg-3 {
  background-image: url("http://i.imgur.com/URjIjZS.png");
}

.bg-4 {
  background-image: url("http://i.imgur.com/Fy7kANa.png");
}

.bg-5 {
  background-image: url("http://i.imgur.com/e2lvJ8q.png");
}

.bg-6 {
  background-image: url("http://i.imgur.com/JEslGSe.png");
}

.bg-7 {
  background-image: url("http://i.imgur.com/v2h0qzb.png");
}

.bg-8 {
  background-image: url("http://i.imgur.com/xyfqUsX.png");
}

.bg-9 {
  background-image: url("http://i.imgur.com/XbIlhvL.png");
}

.bg-10 {
  background-image: url("http://i.imgur.com/xDAIc6P.png");
}

.bg-11 {
  background-image: url("http://i.imgur.com/kaCxCBi.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo" style="display: none;">

</div>

Answer 2

我决定添加一个新的答案，以保持上面的一个，因为它的工作方式略有不同，下面的答案要复杂得多。

我已经实现了你的“踢球者”功能请求，这样如果我们处于两个背景之间（我在下面的评论中称之为“时间块”），中途就会开始淡入淡出。请参阅下面的代码。

请注意：正如我在之前的回答中所述，我必须将背景时间更改为2小时的精确间隔（请参阅javascript代码的底部）。背景可能不再完美地反映现实生活的日落/黎明。有些背景持续时间长达4小时，而其他背景仅持续1小时需要更多编码，所以我希望你能忍受这样的事情： - ）。

我已将计时器设置为7200000毫秒（2小时），因此您必须检查控制台日志（以及背景图像上的Inspect Element）以确定它实际正在运行。我添加了一个控制台日志，向您展示它开始的背景图像和不透明度。例如，现在，因为这里差不多是下午3点，它将从背景7开始几乎完全消失：

CURRENT TIME IS: 14:59. STARTING BACKGROUNDS ARE: bg-6 (opacity 0.01, fading OUT); bg-7 (opacity 0.99, fading IN).

3分钟后，它将开始淡出bg-7（因为我们处于新的时间段）并在下一个背景中开始淡出，即bg-8：

CURRENT TIME IS: 15:02. STARTING BACKGROUNDS ARE: bg-7 (opacity 0.98, fading OUT); bg-8 (opacity 0.02, fading IN).

我很高兴看到最终产品，如果你想把我的名字添加到学分中，我会非常感激！祝好运！

哦，这是新的小提琴：https://jsfiddle.net/LaurensSwart/2go9g5n5/1/

var timeBetweenBackgrounds = 7200000; // in milliseconds - change this to 7200000 for 2 hour between every image

var d = new Date();
var hour = d.getHours();
var minutes = d.getMinutes();
var bgNumber = getPicture(hour);

$(document).ready(function() {

  // Determine starting background images:

  if (bgNumber < 11) {
    var bgNumberNext = bgNumber + 1;
  }
  if (bgNumber == 11) {
    var bgNumberNext = 0;
  }
  
  $('#backgroundOne').addClass('bg-' + bgNumber);
  $('#backgroundTwo').addClass('bg-' + bgNumberNext);
  
  // Get time overshoot (i.e. how far (in percentage) are we in a certain time-block):
  // Every block is 2 hours, so 1 hour into a block would be 50% (0.50)
  // Every minute would be 1/120th of a block (minutes / 60 * 0.50)
  
  var timeovershoot= 0;
  
  // Add 50% to the current block if we're in the second hour of a block (see hour definition on the bottom and adjust this if necessary):
  
  if (hour == 0 || hour == 22 || hour == 20 || hour == 18 || hour == 16 || hour == 14 || hour == 12 || hour == 10 || hour == 8 || hour == 6 || hour == 4 || hour == 2){
    timeovershoot= timeovershoot + 0.5;
  }
  
  // Calculate minute overshoot and add this to the time overshoot:
  
  minuteovershoot= (minutes/60)*0.5;
  timeovershoot= timeovershoot + minuteovershoot;
  
  // Calculate time remaining till this block ends (to determine how long to continue fading for):
  
  percentageOfBlockDone= timeovershoot;
  percentageOfBlockRemaining= 1-percentageOfBlockDone;
  secondsInBlockRemaining= timeBetweenBackgrounds * percentageOfBlockRemaining;
  
  console.log('CURRENT TIME IS: ' + hour + ':' + minutes + '. STARTING BACKGROUNDS ARE: bg-' + bgNumber + ' (opacity ' + percentageOfBlockRemaining.toFixed(2) + ', fading OUT); bg-' + bgNumberNext + ' (opacity ' + percentageOfBlockDone.toFixed(2) + ', fading IN).')
  
  // Set opacity values adjusted to percentage of current block that has elapsed:
  // We're fading div ONE out, so this will have an opacity of the percentage still remaining in this block,
  // and we're fading div TWO in, so this will have an opacity of percentage done in this block.
  
  $('#backgroundOne').css('opacity',percentageOfBlockRemaining);
  $('#backgroundTwo').css('opacity',percentageOfBlockDone);

  // Adjust fade timers and start fading:
  
  $('#backgroundOne').fadeTo(secondsInBlockRemaining, 0);
  $('#backgroundTwo').fadeTo(secondsInBlockRemaining, 1, function(){
  
  	// Once we're done finishing fading the time block that we started in, continue like normal:
  
  	 window.setInterval(setBackground, timeBetweenBackgrounds);
     
  });

});

var activeBackground = bgNumber;
var activeDiv = 1;

function setBackground() {

  if (activeDiv == 1) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container One. Fading in container Two.');
    $('#backgroundTwo').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundOne').fadeOut((timeBetweenBackgrounds - 500), function() {
      activeBackground = nextBackground;
      activeDiv = 2;
    });

  }
  if (activeDiv == 2) {

    if (activeBackground < 11) {
      var nextBackground = activeBackground + 1;
    }
    if (activeBackground == 11) {
      var nextBackground = 0;
    }
    console.log('Current background = ' + activeBackground + '. Next background = ' + nextBackground + '. Fading out container Two. Fading in container One.');
    $('#backgroundOne').attr('class', 'bg').addClass('bg-' + nextBackground).fadeIn(timeBetweenBackgrounds);
    $('#backgroundTwo').fadeOut((timeBetweenBackgrounds - 500), function() {
      activeBackground = nextBackground;
      activeDiv = 1;
    });

  }

}


//Determines the picture to use based on the hour
function getPicture(hour) {
  if (hour >= 23 || hour <= 1)
    return 11;
  else if (hour >= 21)
    return 10;
  else if (hour >= 19)
    return 9;
  else if (hour >= 17)
    return 8;
  else if (hour >= 15)
    return 7;
  else if (hour >= 13)
    return 6;
  else if (hour >= 11)
    return 5;
  else if (hour >= 9)
    return 4;
  else if (hour >= 7)
    return 3;
  else if (hour >= 5)
    return 2;
  else if (hour >= 3)
    return 1;
  else
    return 0;
};

body {
  overflow: hidden;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
  opacity: 0.7;
  margin: 0;
  padding: 0;
}

.bg-0 {
  background-image: url("http://i.imgur.com/qexylYA.png");
}

.bg-1 {
  background-image: url("http://i.imgur.com/cRvIYLJ.png");
}

.bg-2 {
  background-image: url("http://i.imgur.com/UusvZC8.png");
}

.bg-3 {
  background-image: url("http://i.imgur.com/URjIjZS.png");
}

.bg-4 {
  background-image: url("http://i.imgur.com/Fy7kANa.png");
}

.bg-5 {
  background-image: url("http://i.imgur.com/e2lvJ8q.png");
}

.bg-6 {
  background-image: url("http://i.imgur.com/JEslGSe.png");
}

.bg-7 {
  background-image: url("http://i.imgur.com/v2h0qzb.png");
}

.bg-8 {
  background-image: url("http://i.imgur.com/xyfqUsX.png");
}

.bg-9 {
  background-image: url("http://i.imgur.com/XbIlhvL.png");
}

.bg-10 {
  background-image: url("http://i.imgur.com/xDAIc6P.png");
}

.bg-11 {
  background-image: url("http://i.imgur.com/kaCxCBi.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg" id="backgroundOne">

</div>
<div class="bg" id="backgroundTwo">

</div>