jquery display:inline läßt sich nicht zurücksetzen

rabe01

Grünschnabel
Hallo und Moin,
ich bin gerade dabei, mich in jquery einzuarbeiten und versuche, eine scrollbare Gallery zu erstellen.
Dabei sollen alle Bilder geladen aber nur einige angezeigt werden. Das Verstecken mache ich über display:none.
Wenn ich scrolle, werden die Bilder über display:inline und eine animation eingeblendet und verschoben:

function zeileeinblenden(zeile,range,vorzeichen){
for(var qq = 0; qq <=range[2]; qq++){
$('.imageframe:eq(' + zeile[qq] + ')').css('display','inline');
$('.imageframe:eq(' + zeile[qq] + ')').animate({
height: '160px',
top: vorzeichen + range[3],
opacity: '1'
}, 700);
}
}

Andere Bilder sollen hingegen ausgeblendet werden, wobei der style display:none wieder eingestellt werden soll. Dies deshalb, damit im Hauptfenster kein scrollbalken auftaucht, wenn zu viele Bilder - wenn auch nicht sichtbar - auf der Seite erscheinen.
Dies versuche ich so:
function zeileausblenden(zeile,range,vorzeichen){
for(var qq = 0; qq <=range[2]; qq++){
$('.imageframe:eq(' + zeile[qq] + ')').animate({
opacity: '0',
top: vorzeichen + range[3],
}, 700,function() {
$('.imageframe:eq(' + zeile[qq] + ')').css('display','none');
});
}
}

Eigentlich funktioniert soweit alles, bis auf dieses display:none. Wenn ich mir das im Ergebnis nach dem scrollen im Firebug ansehe, werden die Bilder zwar unsichtbar aber der Style 'display' bleibt auf 'inline'.

Was läuft da falsch?

Ein Beispiel liegt unter http://www.rabe-photo.de/csstest

Viele Grüße
Ralph
 
Hi,

das Problem ist, dass die for-Schleife weiterläuft, die callback-Funktion aber erst nach 700ms aufgerufen wird. Zu diesem Zeipunkt ist die Schleife abgearbeitet und die Laufvariable hat den zuletzt angenommen Wert. Dort ist jedoch kein Element mehr definiert.

Lösung: Verwende innerhalb der callback-Funktion die this-Referenz.
Code:
function zeileausblenden(zeile,range,vorzeichen){
  for(var qq = 0; qq <=range[2]; qq++){
    $('.imageframe:eq(' + zeile[qq] + ')').animate({
      opacity: '0',
      top: vorzeichen + range[3]
    }, 700,function() {
      $(this).css('display','none');
    });
  }
}
Ciao
Quaese
 

Neue Beiträge

Zurück