<div class="out">
  
<div class="block">
  <h1>first</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa obcaecati quam, facere fugit praesentium ab rem, harum cumque fugiat, deleniti repudiandae vel molestias porro accusamus aut sapiente officiis iure maxime.</p>
  <div class="nextslide">NEXT</div>
</div>
  
  <div class="block none">
  <h1>second</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa obcaecati quam, facere fugit praesentium ab rem, harum cumque fugiat, deleniti repudiandae vel molestias porro accusamus aut sapiente officiis iure maxime.</p>
  <div class="nextslide">NEXT</div>
</div>
  
  <div class="block none">
  <h1>third</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa obcaecati quam, facere fugit praesentium ab rem, harum cumque fugiat, deleniti repudiandae vel molestias porro accusamus aut sapiente officiis iure maxime.</p>
  <div class="nextslide">NEXT</div>
</div>
  
</div>

.out{
  background: #888;
}

.block{
  transition: 1s;
}
.none{
    display: none;
  transform: translateY(50px);
}

$('.nextslide').on('click', function() {
 $(this).parents('.block').css({
   opacity: '0',
   transform: 'translateY(-50px)' });
 $(this).parents('.block').fadeOut( function() {
    $(this).next('.block').fadeIn();
     $(this).next('.block').css({
   opacity: '1',
   transform: 'translateY(0px)' });
 });
});