JavaScript SlideUp/SlideDown macht meine Fußzeile jumpy nach Folie

Question

Kann mir jemand helfen zu klären, wo das Problem in meinem Code ist.

Ich möchte ein Element ausblenden und dann schieben, so dass das andere Element darunter sichtbar wird (Show) - das gleiche gilt für Slidedown.

Eigentlich funktioniert es, aber es macht meine Fußzeile jumpy jedes Mal, wenn es gleitet, was ist die Lösung?

var openF = $('.openForm').css('color', '#FFF'); 
$('#contact').hide(); 

$(openF).live('click', function() { 
    if ($(this).val() == "Open Contact Form") { 
     $(this).val("Close Contact Form"); 
     $('#contactDT').slideUp(200); 
     $('#contact').show(200); 
    } else { 
     $(this).val("Open Contact Form"); 
     $('#contactDT').slideDown(200); 
     $('#contact').hide(200); 
    } 
}); 

Answer 1

Ich bin nicht sicher, ob ich völlig Ihr Problem verstehen, ohne die HTML und CSS zu sehen, aber es klingt wie Sie padding auf das Element haben könnten, die Sie animieren.

Wenn Sie Ihre Animationen ausführen, treten sie auf, indem Sie die CSS-Höhe des Elements fortlaufend aktualisieren. Das Problem ist, wenn Sie Ihr Element mit einem Padding versehen haben, wird es am Ende der Hide-Animation übersprungen. (Dies liegt daran, dass Ihr Element selbst bei Höhe 0 immer noch die Höhe Ihrer Auffüllung hat.)

Die Lösung hierfür besteht darin, die Auffüllung auf ein Element in einem Wrapper anzuwenden, wo die Animation auf dem Wrapper erfolgt.

Answer 2

Sie animieren sowohl auf slideUp/slideDown als auch auf show/hide mit jeweils 200 Millisekunden. Deshalb der Jumpy-Effekt. Übergeben Sie den Wert 200 nicht, um Funktionen anzuzeigen/auszublenden.

Ändern Sie diese ...

if ($(this).val() == "Open Contact Form") { 
    $(this).val("Close Contact Form"); 
    $('#contactDT').slideUp(200); 
    $('#contact').show(200); 
} else { 
    $(this).val("Open Contact Form"); 
    $('#contactDT').slideDown(200); 
    $('#contact').hide(200); 
} 

zu ...

if ($(this).val() == "Open Contact Form") { 
    $(this).val("Close Contact Form"); 
    $('#contactDT').slideUp(200); 
    $('#contact').show(); 
} else { 
    $(this).val("Open Contact Form"); 
    $('#contactDT').slideDown(200); 
    $('#contact').hide(); 
} 

Dies sollte der jumpy Problem loszuwerden.