[jQuery] Callback wird ignoriert

[Tim Lorens]

Hallö,

ich bastel mir gerade nen' kleinen Image "slider".
Code dazu:

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

Rufe ich so auf:

<div class="emotion"><div class="img"></div></div>
<script type="text/javascript">
    slider.init(".emotion .img", {0: "banner.png", 1: "banner2.png"});
</script>

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

 

[Sempervivum]

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

        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.