Witam,
chcę wykonywać trzy różne fragmenty kodu w różnych odstępach czasowych - dokładniej automatyczny slider. W tym celu stosuje setInterval
setInterval(function () {
$("#slide_1_right").animate({ marginLeft: '+=260', opacity: 0 }, 1000);
$("#slide_1_title").animate({ marginLeft: '-=185', opacity: 0 }, 1000, function () {
$("#slide_control_1").animate({ opacity: 0.4 }, 250);
$("#slide_1").animate({ backgroundColor: '#2bc0b0' }, function () {
$("#slide_2_right").css('margin-left', 370);
$("#slide_2_right").css('opacity', 0);
$("#slide_2_title").css('margin-left', -185);
$("#slide_2_title").css('opacity', 0);
$("#slide_1").css('display', 'none');
$("#slide_2").css('display', 'block');
$("#slide_1").css('background-color', '#0f0f0f');
$("#slider_controls").css('opacity', 0);
$("#slide_2_right").animate({ marginLeft: '-=260', opacity: 1 }, 1000);
$("#slide_2_title").animate({ marginLeft: '+=90', opacity: 1 }, 1000);
$("#slide_control_1").removeClass('slider_controls_active');
$("#slide_control_2").animate({ opacity: 1 }, 250);
$("#slider_controls").animate({ opacity: 1 }, 250);
})
});
}, 6000);
setInterval(function () {
$("#slide_2_right").animate({ marginLeft: '+=260', opacity: 0 }, 1000);
$("#slide_2_title").animate({ marginLeft: '-=95', opacity: 0 }, 1000, function () {
$("#slide_control_2").animate({ opacity: 0.4 }, 250);
$("#slide_2").animate({ backgroundColor: '#dabd1c' }, function () {
$("#slide_3_right").css('margin-left', 370);
$("#slide_3_right").css('opacity', 0);
$("#slide_3_title").css('margin-left', -185);
$("#slide_3_title").css('opacity', 0);
$("#slide_2").css('display', 'none');
$("#slide_3").css('display', 'block');
$("#slide_2").css('background-color', '#2bc0b0');
$("#slider_controls").css('opacity', 0);
$("#slide_3_right").animate({ marginLeft: '-=260', opacity: 1 }, 1000);
$("#slide_3_title").animate({ marginLeft: '+=170', opacity: 1 }, 1000);
$("#slide_control_2").removeClass('slider_controls_active');
$("#slide_control_last").animate({ opacity: 1 }, 250);
$("#slider_controls").animate({ opacity: 1 }, 250);
})
});
}, 12000);
setInterval(function () {
$("#slide_3_right").animate({ marginLeft: '+=260', opacity: 0 }, 1000);
$("#slide_3_title").animate({ marginLeft: '-=170', opacity: 0 }, 1000, function () {
$("#slide_control_last").animate({ opacity: 0.4 }, 250);
$("#slide_3").animate({ backgroundColor: '#0f0f0f' }, function () {
$("#slide_1_right").css('margin-left', 370);
$("#slide_1_right").css('opacity', 0);
$("#slide_1_title").css('margin-left', -185);
$("#slide_1_title").css('opacity', 0);
$("#slide_3").css('display', 'none');
$("#slide_1").css('display', 'block');
$("#slide_3").css('background-color', '#dabd1c');
$("#slider_controls").css('opacity', 0);
$("#slide_1_right").animate({ marginLeft: '-=260', opacity: 1 }, 1000);
$("#slide_1_title").animate({ marginLeft: '+=185', opacity: 1 }, 1000);
$("#slide_control_last").removeClass('slider_controls_active');
$("#slide_control_1").animate({ opacity: 1 }, 250);
$("#slider_controls").animate({ opacity: 1 }, 250);
})
});
}, 18000);
Problem polega na tym, że wykonuje się pierwszy kod, a kolejne już nie działają poprawnie, tj. pierwszy slajd zmienia się na drugi, drugi zmienia się na trzeci (ale drugi nie znika i jest nałożony na trzeci - oba mają 'display: block'), a poźniej już interval wariuje i praktycznie cały czas wisi drugi slajd. Mam nadzieję, że opisałem to dosyć zrozumiale.
Dziękuje za pomoc i pozdrawiam