FadeOut FadeIn Problemen JQUERY

[Verwijderd]

Hallo,

Ik ben bezig om een website te maken.
Zo ziet die er nu uit:
www.lewishamilton.woelmuis.nl


Alleen ik zit met een probleem die je misschien al opgevallen is.
Als ik zap tussen mijn menu. En ik klik erop. Dan vervalt de oude tekst Maar dan gaat eerst het blok naar beneden en dan pas komt de nieuwe tekst.
Hij hoort gewoon te verdwijnen en dan te vervangen zonder eerst een het blok uit te breiden naar benede
Maar het rare is.

Als ik al op home sta en ik druk weer op home dan vervangt die hem zoals ik wil.!

Ik werk met jquery:

code:

$(document).ready(function(e){
    
    $(".jqueryslidemenu ul li a").click(function(e){
        var _getSource = $(this).attr("rel");
        $(".content").fadeOut("slow")
            $("."+_getSource).fadeIn("slow")

          });
          return false;

        });

Ik kom er echt niet meer uit:p
Ik heb even voor wat extra duidelijkheid alle bestanden in een rar gezet: http://ul.to/e46wkb

[ Voor 4% gewijzigd door Verwijderd op 21-03-2010 22:02 ]

[Grijze Vos]

Dat is helemaal niet raar. Als je op eender welke pagina staat en dezelfde pagina opent dan wordt dezelfde div uitgefade en weer ingefade. Als je op een andere pagina klikt dan wordt div1 uitgefade, en div2 ingefade -terwijl div1 nog aan het uitfaden is-. Hij rendert gewoon die tweede div onder de eerste.

Wat je moet doen is een timer zetten op de fadeout van div1, zodra die is uitgefade laat je div2 infaden.
Overigens wil je niet al je content al in je website hebben, laadt het in met ajax oid.

[Verwijderd]

Grijze Vos schreef op zondag 21 maart 2010 @ 22:01:
Dat is helemaal niet raar. Als je op eender welke pagina staat en dezelfde pagina opent dan wordt dezelfde div uitgefade en weer ingefade. Als je op een andere pagina klikt dan wordt div1 uitgefade, en div2 ingefade -terwijl div1 nog aan het uitfaden is-. Hij rendert gewoon die tweede div onder de eerste.

Wat je moet doen is een timer zetten op de fadeout van div1, zodra die is uitgefade laat je div2 infaden.
Overigens wil je niet al je content al in je website hebben, laadt het in met ajax oid.

Hoe doe ik dat

code:

$(document).ready(function(e){
    
    $(".jqueryslidemenu ul li a").click(function(e){
        var _getSource = $(this).attr("rel");
        $(".content").fadeOut(1, function(e){
            $("."+_getSource).fadeIn(800);
            
        });
        
        
    });
});

Zo werkt die ook niet

[ Voor 20% gewijzigd door Verwijderd op 21-03-2010 22:07 ]

[Grijze Vos]

Het is nog makkelijker dan ik dacht, want fadeOut heeft gewoon een callback functie.

[Verwijderd]

Grijze Vos schreef op zondag 21 maart 2010 @ 22:08:
Het is nog makkelijker dan ik dacht, want fadeOut heeft gewoon een callback functie.

code:

$(document).ready(function(e){
    
    $(".jqueryslidemenu ul li a").click(function(e){
        var _getSource = $(this).attr("rel");
        $(".content").fadeOut(1, function(e){
         // Animation complete.
            $("."+_getSource).fadeIn(800);
            
        });
        
        
    });
});

Zo doet die het ook niet

[Grijze Vos]

_Wat_ doet het niet? Beetje debuggen mag wel hoor.

[Verwijderd]

Grijze Vos schreef op zondag 21 maart 2010 @ 22:13:
_Wat_ doet het niet? Beetje debuggen mag wel hoor.

Nog steeds dat die eerst naar ondervliegt
en dan pas vervangt

Kijk ik kan de fadeOut wel op -90000000 zetten.
Maar dan blijf je toch die verschuiving zien van de onderste balk
Kijk nu maar op www.lewishamilton.woelmuis.nl
Ik heb hem aangepast naar:

code:

$(document).ready(function(e){
    
    $(".jqueryslidemenu ul li a").click(function(e){
        var _getSource = $(this).attr("rel");
        $(".content").fadeOut(-90000000000000,("."))
            $("."+_getSource).fadeIn(300)

          });
          return false;

        });

[ Voor 57% gewijzigd door Verwijderd op 21-03-2010 22:32 ]

[Grijze Vos]

Het probleem ontstaat omdat je alle blocks met de class .content wegfade. Degene die al display: none hebben op dat moment triggeren meteen de event complete functie die je meepasst, waardoor de fadeIn nog te vroeg plaats vind.