Я новичок в jQuery, и у меня есть проблема, которая, я считаю, для некоторых из вас будет куском пирога. :)
Я создал пользовательский пользовательский слайдер изображений, который работает почти так, как я хотел, чтобы он работал, за исключением одного. Эффекты, которые должны возникать при каждом сдвиге слайда, отображаются только после прохождения всех слайдов. Перед этим они отображаются мгновенно - никакого эффекта вообще.
Вот ссылка JSFiddle и фрагмент кода ниже.
$(document).ready(function () {
var slideHovered = null;
var slideDuration = 7000;
var slideEffectDuration = 2500;
//Initial hiding of inactive slides - is it actually necessary?
$('.slide:not(.active)').each(function () {
$(this).css({
"visibility": "hidden"
});
});
//Check if mouse is hovering over slider
setInterval(function () {
slideHovered = $('.leftContentWrapper').is(":hover");
}, 500);
//Function to start slideshow
function startSlides(slideDirection) {
var slideNumber = $('.slide.active').data('slide');
var highestSlideNumber = null;
//Function to find highest slide number
$('.slide').each(function () {
var value = parseFloat($(this).attr('data-slide'));
highestSlideNumber = (value > highestSlideNumber) ? value : highestSlideNumber;
});
slideNumber = slideDirection == 'next' ? slideNumber = slideNumber + 1 : slideNumber = slideNumber - 1;
slideNumber = slideNumber <= 0 ? slideNumber = highestSlideNumber : slideNumber = slideNumber;
slideNumber = slideNumber > highestSlideNumber ? slideNumber = 1 : slideNumber = slideNumber;
$('.slide.active').removeClass('active').hide();
$('[data-slide="' + slideNumber + '"]').addClass('active').fadeIn(slideEffectDuration, function () {});
$('.slide.active').css({
'visibility': 'visible'
});
}
//Function to change slide every x seconds if there is no hovering over
setInterval(function () {
if (slideHovered === false) {
startSlides('next');
} else {
return false;
}
}, slideDuration);
$('.control').click(function () {
var slideDirection = $(this).attr('id');
startSlides(slideDirection);
});
});
PS Приветствуется любое дополнительное предложение или совет.
Ваша первоначальная скрыть проблема, измените ее на:
$(this).css({
"display": "none"
});