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;
}.
