Cross-fading an html jquery switch

Question

I have a fixed headline that changes when you enter the next div through a jquery .html switch. How would I get the current headline to fade out and the new one to fade in simultaneously on the switch to the next div?

codepen: https://codepen.io/balke/pen/JpNNve

$(window).scroll(function() {

  var $window = $(window),
    $headline = $('.headline'),
    $panel = $('.panel');

  var scroll = $window.scrollTop() + ($window.height() / 3);

  $panel.each(function() {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $headline.html('<h1>' + $(this).data('name') + '</h1>').fadeIn('slow');
    }
  });

}).scroll();

body {
  margin: 0;
}

.headline-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
}

.headline {
  text-align: center;
}

.panel {
  min-height: 100vh;
  background-color: red;
  margin: 1px;
}

h1 {
  font-size: 40px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="headline-wrap">
  <div class="headline">
    <h1>Headline 1</h1>
  </div>
</div>

<div class="panel" data-name="Headline1"></div>
<div class="panel" data-name="Headline2"></div>
<div class="panel" data-name="Headline3"></div>

The snippet is much more useful than separate html, css and script — mplungjan, Feb 11 '18 at 17:12
@mplungjan not seeing anything on fading a change in html data — Blake Bowman, Feb 11 '18 at 17:17
https://stackoverflow.com/questions/19258544/fade-divs-in-and-out-on-jquery-scroll — mplungjan, Feb 11 '18 at 17:23
https://stackoverflow.com/questions/27890007/jquery-fade-out-div-with-page-scroll — mplungjan, Feb 11 '18 at 17:23
Why are they not useful? I am leaning towards closing as duplicate — mplungjan, Feb 11 '18 at 17:23
@mplungjan Those are based on the element fading and another div appearing I'm trying to do it so the fade in and out happens when the .html data changes. So nothing is visible/hidden, it's just changing the data. — Blake Bowman, Feb 11 '18 at 17:35

score 1 · Accepted Answer · answered Feb 11 '18 at 17:33

I have used opacity to fade-out, you can use the same to fade-in as well

$(window).scroll(function() {

  var $window = $(window),
      $headline = $('.headline'),
      $panel = $('.panel');

  var scroll = $window.scrollTop() + ($window.height() / 3);

  $panel.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      var top = ($this.position().top + $this.height() - scroll)/100;
      $headline.html("<h1 style='opacity:"+top+"'>" + $(this).data('name') + '</h1>').fadeIn('slow');      
    }
  });    

}).scroll();

codepen: https://codepen.io/YasirKamdar/pen/JpNJPq?editors=1111

Cross-fading an html jquery switch

1 Answers1