Oskryptowanie slidera

0

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

1

Uwag jest kilka, zacznijmy od tych na temat:

  1. Opracowywując takie działanie warto:
    a) nie robić wszystkiego na raz, czyli pozbądź się wszystkiego, co niezwiązane jest z animacją samych elementów slidera (czyli najazdy tytułów itd) - dopiero kiedy będzie działać podstawa to dopisuj bajery
    b) rozpisz sobie algorytm na kartce, co po kolei się powinno dziać, to bardzo pomaga na początku

  2. U Ciebie problemem jest brak zrozumienia różnic pomiędzy setInterval a setTimeout

A teraz mniej "na temat"
3) To jest mega nieoptymalne (normalne IDE podkreśli Ci co drugą linijkę), a nawet bez sensu
4) Łamie do bólu zasadę DRY (poczytaj)
5) Wynajdujesz koło od nowa, jeżeli to jest do nauki to spoko, ale na produkcję tego nie wrzucaj (szczególnie, że sliderów nie powinno się robić na intervalach)

1

Staraj sie cacheować zmienne. Przyspieszy to Twój skrypt, bo operujesz na referencji. Dodatkowo jak Ci przyjdzie zmienić ID to zmienisz w jedym miejscu, a nie w 10.

// Zamiast w 10 linijkach to samo $("#slide_1_right")
// definiujesz to raz i korzystasz ze zmiennej
var slideRight_1 = $("#slide_1_right");

jQuery zawsze zwraca obiekt, tzn. możesz skorzystać z chainowania czyli:

// Zamiast dla każdej następnej funkcji pisać slideRight_1.css(...) i nowej linijce to samo to robisz
var slideRight_1 = $("#slide_1_right");
slideRight_1.css().fade().nastepnaFunkcja(); 

Funkcja .css() może przyjąć jako argument obiekt tzn.

var slideRight_1 = $("#slide_1_right");
slideRight_1.css({
  'margin-left': '370px',
  'opacity': '0',
  'background-color': 'black'
});

Spróbuj znaleźć jakiś prosty slider i zobaczyć jak jest zbudowany, a później zbudować swój samemu. Ciężko Ci będzie się nauczyć samemu kombinując, a i zajmie to dużo więcej czasu. To jak z grą na instrumencie. Możesz się uczyć sam grać na gitarze, ale lepiej podpatrzeć jak robią to zawodowcy, bo jak narobisz sobie złych nawyków to trudno Ci będzie się ich pozbyć żeby przeskoczyć pewien poziom. Ale plus za próbę! :)

Ogólnie to ten post może Ci się przydać: http://lab.abhinayrathore.com/jquery-standards/

0

Dziękuję wszystkim za pomoc :)
Tak sobie jeszcze dłubie w celach naukowych chcąc to jakoś udoskonalić i mam pewien problem

var slide_right = $("#slide_1_right");
var slide_title = $("#slide_1_title");
var slide_control_1 = $("#slide_control_1");
var slide_control_2 = $("#slide_control_2");
var slide_control_3 = $("#slide_control_last");
var slide = $("#slide_1");
var delay = 250;

function Slide() {
	slide_right.animate({ marginLeft: '+=260', opacity: 0 }, delay);
	slide_title.animate({ marginLeft: '-=185', opacity: 0 }, delay, function () { /*stop*/
		slide_control_1.animate({ opacity: 0.4 }, delay);
		slide.animate({ backgroundColor: '#2bc0b0' }, function () {
			slide_right.css('margin-left', 370);
			slide_title.css('margin-left', -185);
			slider_controls.css('opacity', 0);
			slide_title.css('background', 'url(../images/sth_spirte.png) 0px -694px');
			slide_right.animate({ marginLeft: '-=260', opacity: 1 }, delay);
			slide_title.animate({ marginLeft: '+=90', opacity: 1 }, delay);
			slide_control_1.removeClass('slider_controls_active');
			slide_control_2.animate({ opacity: 1 }, delay);
			slider_controls.animate({ opacity: 1 }, delay);
		  })
	  });
}

Mam taki oto kod i w zaznaczonym miejscu (po wykonaniu drugiej linijki) następuje przerwanie. Jak deklaracje zmiennych mam wewnątrz funkcji wszystko działa. Jak chcę deklarować je poza funkcją, aby mieć dostęp w innych funkcjach to jest zatrzymanie. Pytanie pewnie banalne, ale jestem dosyć początkujący :)

Serdecznie dziękuje za pomoc

1

W 3 linii od dołu nie masz średnika :P I nie wiem jak Ty to zrobiłeś, ale mi podobny kod działa. W funkcji Slide (nie wiem czemu wielką literą, skoro to nie jest konstruktor) masz dostęp do zmiennych zdefiniowanych nad nią przez domknięcie (ang. closure). Nie ważne gdzie tą funkcję wywołasz to masz dostęp do jej "środowiska". Z tego wynika, że przeniesienie deklaracji do wewnątrz nie powinno wpłynąć na wykonanie tej części kodu, przynajmniej tak mi się wydaje, ale mogę się mylić.

0

Wciąż nic. Dałem średnik i identyczna sytuacja. Debugger od Chrome wykonuje pierwszą linijkę, druga i kończy funkcję. Nie mam pojęcia co jest nie tak. Co do nazwy z dużej listery to zostało mi to z okresu nauki C#, kiedy to byłem uczony, ze zmienne z małej, metody z dużej i konwencja "wielbłąda", o ile tak to można nazwać :P

0

Wrzuć cały kod na jsfiddle.

1 użytkowników online, w tym zalogowanych: 0, gości: 1