Problema Slider | jQuery: avance na biblioteca mais popular do mercado parte 2

Criei um slider mas quando passo o mouse no mesmo botão duas vezes seguida o efeito fadeOut() / fadeIn() fica muito branco a ponto do fundo ficar totalmente em branco. Gostaria que ficasse menos branco ou seja meio cinza

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Carousel</title>

  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div class="slider">
    <div class="slider-main">
      <div class="slider-panel">
        <img src="https://dummyimage.com/650x413/F17C67/fff&text=1">
      </div>
      <div class="slider-panel">
        <img src="https://dummyimage.com/650x413/F17C67/fff&text=2">
      </div>
      <div class="slider-panel">
        <img src="https://dummyimage.com/650x413/F17C67/fff&text=3">
      </div>
    </div>
    <div class="slider-extra">
      <div class="slider-nav">
        <a class="slider-item">1</a>
        <a class="slider-item">2</a>
        <a class="slider-item">3</a>
      </div>
    </div>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script  src="js/index.js"></script>

</body>
</html>

insira seu código aqui

$(document).ready(function() {
  var length,
    currentIndex = 0,
    interval,
    hasStarted = false,
    timer = 3000;

  length = $('.slider-panel').length;

  $('.slider-panel:not(:first)').hide();

  $('.slider-item:first').addClass('slider-item-selected');

  $('.slider').hover(function() {
    $('.slider-page').show();
    stop();
  }, function() {
    $('.slider-page').hide();
    start();
  });

  $('.slider-item').hover(function() {
    stop();
    var preIndex = $('.slider-item').filter('.slider-item-selected').index();
    currentIndex = $(this).index();
    play(preIndex, currentIndex);
  }, function() {
    start();
  });

  $('.slider-pre').bind('click', function() {
    pre();
  });

  $('.slider-next').bind('click', function() {
    next();
  });

  start();

  function pre() {
    var preIndex = currentIndex;
    currentIndex = (currentIndex + length) % length;
    play(preIndex, currentIndex);
  }

  function next() {
    var preIndex = currentIndex;
    currentIndex = (++currentIndex) % length;
    play(preIndex, currentIndex);
  }

  function play(preIndex, currentIndex) {
    var $picLen = currentIndex * $('.slider-panel img').width();

    $('.slider-panel')
      .eq(preIndex)
      .fadeOut(400)
      .parent()
      .children()
      .eq(currentIndex)
      .fadeIn(1000);

    $('.slider-item').removeClass('slider-item-selected');
    $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
  }

  function start() {
    if (!hasStarted) {
      hasStarted = true;
      interval = setInterval(next, timer);
    }
  }
  function stop() {
    clearInterval(interval);
    hasStarted = false;
  }
});

insira seu código aqui

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

.slider,
.slider-panel img,
.slider-extra {
  width: 511px;
  height: 350px;
}

.slider {
  text-align: center;
  margin: 30px auto;
  position: relative;
}

.slider-panel,
.slider-nav,
.slider-prev,
.slider-next {
  position: absolute;
  z-index: 8;
}

.slider-panel img {
  border: none;
}

.slider-extra {
  position: relative;
}

.slider-nav {
  margin-left: -51px;
  position: absolute;
  left: 35%;
  bottom: 25px;
}

.slider-item {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0 23px;
    padding: 10px;
    border: 2px solid #fff;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.slider-item:active, .slider-item:focus, .slider-item:hover {
  color: #000;
 background: #fff;
}

.slider-pre {
  left: 0;
}

.slider-next {
  right: 0;
}