Jquery: Oldal betöltés előtt fadeOut, betöltés után fadeIn

Jquery: Oldal betöltés előtt fadeOut, betöltés után fadeIn
2016-07-21T13:13:22+02:00
2016-07-21T14:24:36+02:00
2022-10-15T22:15:35+02:00
Teofil
Sziasztok!

Hogy lehet azt megoldani, hogy ha betöltök egy oldalt, akkor annak egy eleme, jelen esetben "#workContent" div ha létezik (ha már a weboldal be van töltve, és linkkel egy másik oldalt töltök be, ahol az szintén szerepel) akkor fadeOut-al eltűnjön, majd a teljes oldal betöltése után, fadeIn-el megjelenjen. A későbbiekben akár egy töltés indikátort is betennék.
Ami még érdekes, hogy vannak select beviteli mezők, amiket a select2 pluginnel vannak megoldva, hogy segítse a keresést a nagyméretű option listáknál (városok, irányítószámok kiírása, 3000 feletti sor). Ennek eddig azt a hátrányát láttam, hogy nagymértékben lassítja az oldal megjelenítését, különösképp, hogy a select2 az oldal teljes betöltése után fut le, ezáltal láthatóan sorba jelennek meg a html elemei. A lényeg az lenne, hogy a fadeIn effekt akkor induljon el, mikor ez a plugin is rendesen lefutott, hogy szépen jelenjen meg az "ablak".

Amivel próbálkoztam eddig:
a fejlécbe betettem a következő sorokat:

<script> $( "#workContent" ).fadeOut( "slow", function(){ $( "#workContent" ).css( "display", "none" ); }); </script>
a külső js file-ba pedig:

$( document ).ready( function() { $( "#workContent" ).fadeIn( "slow", function(){ $("#workContent").css("display", "block"); }); });
illetve próbálkoztam azzal, hogy szintén a ( dokument ).ready... blokkba betettem:

$( 'a' ).click( function() { $( "#workContent" ).fadeOut( "slow", function(){ $( "#workContent" ).css( "display", "none" ); });
Egyik megoldás sem vezetett sikerre...
Mutasd a teljes hozzászólást!
Hasonlót csináltam már én is, csak nem teljes oldal fadeIn/Out, csak egy div.
Próbáld ki, hátha: (átírtam a Te dived nevére)

$.ajax({ url : "index.html", success : function (data) { $("#workContent").html(data); } }); function getFreshSidebar() { $("#workContent").fadeOut(400, function() { $("#workContent").load("index.html", function() { $("#workContent").fadeIn(); }); }); }; $( 'a' ).click( function() { getFreshSidebar(); });
Mutasd a teljes hozzászólást!

  • A probléma második fele megoldódott... css-ben a #workcontent div display-t átállítottam none-ra. Ez megoldja a select2 említett megjelenítési gondját is, bár így lassabban jelenik meg az ablak. Már csak a fadeOut-ot kell megoldani, hogy átmentes legyen.
    Mutasd a teljes hozzászólást!
  • Bár kissé zavaros amit írtál....
    A fadeOut-nak akkor van értelme egy elemre, ha az már megjelent ( akár normál oldalbetöltés során, akár oldal betöltődése után fadeIn-nnel)...
    Ha egy plugin lefutása után akarod a fadeIn-t vagy fadeOut-ot, akkor érzékelni kell valamilyen módon a plugin lefutását és ha megtörtént, akkor indítani a fadeIn-t vagy fadeOut-ot...

    Megj: Nézd meg a következő, In/Out egymásba ágyazását (Vertikális megoldás előre-hátra léptetéssel... alatt), természetesen a forráskódban...
    Mutasd a teljes hozzászólást!
  • $( "#workContent" ).fadeOut( "slow", function(){ $( "#workContent" ).css( "display", "none" ); });
    Ennek így semmi értelme, a fadeOut() pont azt csinálja, hogy animálva eltünteti az elemet, minek meghívni a befejezésre még egy display: none-t?

    Ha az eltűnést/megjelenítést akarod betöltésre "egymásba ágyazni, akkor

    $( document ).ready( function() { $( "#workContent" ).fadeOut( "slow", function(){ $( "#workContent" ).fadeIn( "slow" ); }); });
    Persze ehhez nem kell css-ből display:none-ra állítani az elemet, a jQ-ra van bízva az egész.
    Mutasd a teljes hozzászólást!
  • Hasonlót csináltam már én is, csak nem teljes oldal fadeIn/Out, csak egy div.
    Próbáld ki, hátha: (átírtam a Te dived nevére)

    $.ajax({ url : "index.html", success : function (data) { $("#workContent").html(data); } }); function getFreshSidebar() { $("#workContent").fadeOut(400, function() { $("#workContent").load("index.html", function() { $("#workContent").fadeIn(); }); }); }; $( 'a' ).click( function() { getFreshSidebar(); });
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd