[jQuery] Callback wird ignoriert

html.de-Forum JavaScript
1

Hallö,

ich bastel mir gerade nen’ kleinen Image „slider“.
Code dazu:

[CODE]var slider = {
delay: 3000,
imageList: new Array(),
index: -1,
elem: null,

init: function(elem, images) {
    this.elem = $(elem);
    for(var i = 0; images[i]; i++) {
        var img = new Image();
        img.src = "../mvc/img/" + images[i];
        this.imageList.push(img);
    }

    if(this.index == -1) {
        var img = this.imageList[this.getIndex()];
        var elem = this.elem;
        elem.html("<img src=\"" + img.src + "\">");
        elem.css({height: img.height});
        elem.delay(this.delay);
        this.next();
    }
    else
        this.next();
},

next: function() {
    var img = this.imageList[this.getIndex()];
    var elem = this.elem;
    elem.animate({opacity: 0, height: img.height}, function() {
        elem.html("<img src=\"" + img.src + "\">");
        elem.animate({opacity: 1});
        elem.delay(this.delay);
        this.next();
    }, "easeInOutCirc");
},

getIndex: function() {
    this.index++;
    if(this.index > this.imageList.length)
        this.index = 0;
    return this.index;
}

};[/CODE]

Rufe ich so auf:
[HTML]

[/HTML]

Das erste Bild wird angezeigt, nach 3 Sekunden sollte eig das nächste geladen werden… aber der Callback wird nicht aufgerufen.

Warum?

Ich komm’ nicht drauf.

-Tim

2
  1. Schau dir mal die Beschreibung von animate() an:
    http://api.jquery.com/animate/
    Erst kommt das Easing und als letztes die Callback-Funktion.

elem.animate({opacity: 0, height: img.height}, function() { elem.html("<img src=\"" + img.src + "\">"); elem.animate({opacity: 1}); elem.delay(this.delay); this.next(); }, "easeInOutCirc");
Bei this.next() ist this nicht der Slider sondern das Element, auf das jQuery gerade arbeitet, nämlich elem. Die Funktion this.next() ist daher unbekannt. Analog bei elem.delay(this.delay);

BTW1: In meinen Augen wäre es logischer, der Funktion init() ein Array zu übergeben und nicht ein Objekt:

["banner.png", "banner2.png"]

BTW2: In meinen Augen wäre es eleganter, nicht den HTML-Text auszutauschen, sondern ein img-Tag zu verwenden und nur das Attribut src auszutauschen.