jQuery.replaceWith().fadeIn()

Von in jquery

Das mäch­ti­ge JavaScript-​Framework jQue­ry ermög­licht mit einer äußerst kur­zen Syn­tax die rasche Rea­li­sie­rung auf­wen­di­ger Effek­te. Manch­mal füh­ren jedoch die Funk­tio­nen des Frame­works zu uner­war­te­ten Ergeb­nis­sen, vor allem, wenn man nicht jede ein­zel­ne ihrer Aus­wir­kun­gen bedenkt. Eine sol­che “Fal­le” stellt die Funk­ti­on repla­ce­With() im Zusam­men­hang mit fadeOut() und fad­eIn() dar, die ich in die­sem Arti­kel beleuch­ten und einen Lösungs­vor­schlag dafür bie­ten möch­te.

Die Situa­ti­on stellt sich wie folgt dar: Man möch­te ein Ele­ment, zum Bei­spiel ein Bild, beim Ein­tre­ten eines Events, zum Bei­spiel ein Über­fah­ren mit dem Maus­zei­ger, aus­blen­den (fadeOut()), das nicht mehr sicht­ba­re Ele­ment aus­tau­schen (repla­ce­With()) und das neue Ele­ment mit fad­eIn() wie­der ein­blen­den. Also in etwa so:

$('#element').fadeOut(function(){
    $('#element').replaceWith(neues Element).fadeIn();
});

Das klappt auf den ers­ten Blick schon ganz gut, lei­der erkennt man jedoch auch ohne nähe­rem Hin­se­hen, dass das “neue Ele­ment” noch vor dem Ein­blen­den kurz auf­fla­ckert, was den hüb­schen Effekt wie­der zunich­te macht.

Erstaun­li­cher­wei­se fin­den sich zu die­sem Pro­blem nur sehr weni­ge Arti­kel im Inter­net, teil­wei­se auch mit nur halb­her­zi­gen Lösungs­vor­schlä­gen, die zwar einen Work­a­round für die repla­ce­With() Funk­ti­on bie­ten, aber das Fla­ckern erstaun­li­cher­wei­se (bzw. erklär­li­cher­wei­se) nicht behe­ben.

Das Pro­blem:
Fügt man wie folgt mit jQue­ry ein neu­es Ele­ment ein, wird die­ses auto­ma­tisch sicht­bar. Ein Bei­spiel:

$('span').append(<span>Text</span>);

Bei repla­ce­With() geschieht ähn­li­ches. Das getausch­te Ele­ment wird sicht­bar, und zwar unab­hän­gig davon, ob das ursprüng­li­che Ele­ment zuvor auf hid­den (hide(), fadeOut()) gestellt wor­den ist, oder nicht. Ein fad­eIn() geht aber davon aus, dass das Ele­ment zunächst unsicht­bar sein muss, sonst könn­te es nicht ein­ge­blen­det wer­den.

Zeit­lich gese­hen pas­siert also Fol­gen­des: Das Ele­ment wird aus­ge­blen­det und aus­ge­tauscht, wobei das neue Ele­ment sofort erscheint. Danach wird es ver­steckt und wie­der ein­ge­blen­det.

Lösungs­vor­schlag:
Mein Lösungs­an­satz zielt dar­auf ab, nicht das Ele­ment zu tau­schen, son­dern des­sen Inhalt. Das ist so banal, wie es sich anhört. Ange­nom­men es han­delt sich um ein <div id=“container”>, wel­ches irgend­ein Ele­ment beinhal­tet. Das Ele­ment soll getauscht wer­den. Also blen­den wir zunächst den Division-​Tag aus, wech­seln das Ele­ment und blen­den den Tag wie­der ein. So könn­te der Code aus­se­hen:

$('#container').fadeOut(function(){
    $('#container').empty().html(neues Element).fadeIn();
});

Wich­tig dabei ist, den Con­tai­ner nicht aus­zu­tau­schen, denn nur so bleibt er ver­steckt. Das aus­ge­tausch­te Ele­ment kann nicht ange­zeigt wer­den, weil der Con­tai­ner auf hid­den ver­weilt. Solan­ge, bis ihn das fad­eIn() mit­samt sei­nem Inhalt wie­der ein­blen­det.

Es ist ver­wun­der­lich, dass man bei der repla­ce­With() Funk­ti­on die Mög­lich­keit eines fadeOut und anschlie­ßen­den fad­eIn nicht bedacht hat, wo doch jQue­ry genau auf sol­che Ani­ma­tio­nen abzielt. Ich hof­fe, mein Lösungs­vor­schlag bringt hier Abhil­fe.

Nach­trag 23.12.2010:
In mei­ner Eupho­rie habe ich ganz über­se­hen, alle Funk­tio­nen zu ver­ket­ten. Natür­lich lässt sich obi­ger Aus­druck auch wie folgt schrei­ben:

$('#container').fadeOut().empty().html(neues Element).fadeIn();
Share on Google+Share on RedditTweet about this on TwitterShare on LinkedInShare on FacebookShare on XingEmail this to someone