[Fixed] jQuery animate probleem/bug

Hallo,

Voor dit probleem zullen jullie toch even naar mijn site moeten gaan: {Opgelost!}
Gebruikersnaam: {Opgelost!}
Wachtwoord: {Opgelost!}

Je ziet als het goed is een bericht.
Als je daar snel met je muis over heen gaat, zal het uiteindelijk naar boven animeren..
Waarom doet die dat?
De functie .stop() werkt niet.

De code:

$("div.gebruiker_bericht").hover(
  function() {      
 // Haal de huidige hoogte + 20px
var newheight = $(this).height()+20;
 // Animeer 20px naar beneden
  $(this).stop().animate({
    height: newheight+"px",
  }, 100 );
// Fade in: Leuk, WTF, Antwoord
  $(this).children(".bericht_opties").stop(true,true).fadeIn(100)
     },
  function() {
  // Haal de huidige hoogte - 20px
var newheight1 = $(this).height()-20;
// Animeer 20px terug omhoog 
 $(this).stop().animate({
    height: newheight1+"px",
  }, 100 );
// Fade out: Leuk, WTF, Antwoord
  $(this).children(".bericht_opties").stop(true,true).fadeOut(100);
 });

Weet iemand waarom dit zo bugt?

Alvast bedankt!

Je kijkt telkens na het stoppen hoe groot de hoogte is, vervolgens doe je daar 20 bij / af.

als je dus .stop() doet, dan is de animatie nog niet klaar en heeft de div bijvoorbeeld een hoogte van 98px (in plaats van 100px). Als je daar dan die 20 bij / af doet dan klopt het uiteraard niet meer.

Ik denk dus dat alle andere .stop() s ook true, true moeten hebben.

Nu zit ook true,true bij de stop voor de animate, en het werkt nog steeds niet.

Hmmm ff denken...

Als je hovert, dan sla je eerst de nieuwe heigt op. Vervolgens stop je de animatie pas en animeer je hem opnieuw.

Probeer eens eerst de animatie met stop(true,true) te stoppen, en vervolgens pas de height op te slaan en dan opnieuw te animeren? ^^

Wat bedoel je met "eerst de animatie met stop(true,true) te stoppen"?

Je hebt nu:

// Haal de huidige hoogte + 20px
        var newheight = $(this).height()+20;
        
        // Animeer 20px naar beneden
        $(this).stop(true,true)
               .animate({
                    height: newheight+"px",
                }, 100 );

Dus:
Sla height op > Stop animatie (maar maak animatie af) > Animeer opnieuw

Het moet worden:
Stop animatie (maar maak animatie af) > Sla height op > Animeer opnieuw

Zoiets dus:

// Animeer 20px naar beneden
        $(this).stop(true,true);
        var newheight = $(this).height()+20;
        $(this).animate({
                    height: newheight+"px",
                }, 100 );

Rik schreef:

Je hebt nu:

// Haal de huidige hoogte + 20px
        var newheight = $(this).height()+20;
        
        // Animeer 20px naar beneden
        $(this).stop(true,true)
               .animate({
                    height: newheight+"px",
                }, 100 );

Dus:
Sla height op > Stop animatie (maar maak animatie af) > Animeer opnieuw

Het moet worden:
Stop animatie (maar maak animatie af) > Sla height op > Animeer opnieuw

Zoiets dus:

// Animeer 20px naar beneden
        $(this).stop(true,true);
        var newheight = $(this).height()+20;
        $(this).animate({
                    height: newheight+"px",
                }, 100 );

Thanks! Het werkt nu goed! Check maar!

Ja ik zie het. Maar het belangrijkste is: Snap je ook waardoor het gebeurde? ^^
Daar leer je namelijk van

Dat als eerst alle animaties niet worden gequeed?