Nachdem JQuery slideUp() beendet den Rest des Inhalts springt an Ort und Stelle

Ich versuche, eine einfache JQuery SlideUp einer Informationsnachricht zu tun. Das Problem ist, dass die Nachricht sauber herausrutscht und die Animation gut aussieht, aber das Div unter demjenigen, das ich herausschiebe, bleibt solange stehen, bis die Animation fertig ist, dann springt es einfach an seinen Platz. Ich möchte, dass das folgende div nach oben fährt, während meine Nachricht verschwindet.Nachdem JQuery slideUp() beendet den Rest des Inhalts springt an Ort und Stelle

Ich habe versucht, fast jeden Aspekt des CSS zu ändern, die ich kann (z. B. entfernte Position: relativ, nicht gefesselt den Container, etc.), aber nichts scheint zu funktionieren.

Hier ist das Javascript:

$(function() { 
    setTimeout(function(){ 
     $('.flash').slideUp('slow'); 
     }, 1000); 
});

Hier ist der HTML:

<div class='page-content'> 
    <div class='flash'> 
    <div class='notice'>I'm testing the flash</div> 
    </div> 
    <div class='data-table'> 
    ... The rest of the page ... 
    </div> 
</div>

Hier ist der relevante CSS:

.page-content { 
    width: 95%; 
    float: left; 
    padding: 25px 2.5% 0; 
} 
.flash { 
    background-color: #dcffb9; 
    border: 1px solid #78b73f; 
    border-bottom: 1px solid #d9d9d9; 
    font-size: 16px; 
    font-weight: bold; 
    margin-bottom: 15px; 
    padding: 0; 
    position: relative; 
} 
.flash .notice { 
    background: url(../images/flash-notice-bg.gif) no-repeat 20px 50%; 
    border-bottom: 1px solid #78b73f; 
    padding: 20px 0 20px 70px; 
}

Jede Hilfe wäre sehr geschätzt.

Quelle

2009-07-12 Thadd Selden

Anknüpfend, das Problem ist, wenn ich die JQuery für Rails-Unterstützung enthalten Javascript-Datei. Ohne es gleitet es gut.

JRails definiert aus irgendeinem Grund slideUp und slideDown neu. Es gibt einen Fehler, der gegen JRails eingereicht wurde und genau dieses Problem anspricht: http://code.google.com/p/ennerchi/issues/detail?id=43. Ich tat, als der Bug-Übermittler JRails-Versionen der Slide-Funktionen vorschlug und umbenannte und meine Sachen jetzt richtig funktionieren.

Quelle

2009-07-12 19:32:39

Folgen Sie, indem Sie Ihren ursprünglichen Beitrag bearbeiten oder Kommentare verwenden. Stellen Sie die Antworten nicht als Followups bereit, es sei denn, sie beantworten die Frage. – Soviut

Das beantwortet die Frage, weshalb ich es als Antwort gepostet habe. Indem ich die beschriebenen Schritte befolge, habe ich das Problem nicht mehr, das im ursprünglichen Beitrag beschrieben wurde. –

Das Problem ist der untere Rand: 15px; auf dem Flash-Element. Stellen Sie sicher, dass Sie den Rand und den Abstand auf 0 festgelegt haben.

Dies liegt daran, dass slideUp die Höhe auf 0 reduziert, den Rand jedoch nicht ändert. Wenn also das Element nicht mehr nach oben rutscht, hat es immer noch einen 15px Rand. Der letzte Schritt besteht darin, das Element zu verstecken. An diesem Punkt verschwindet auch der Rand und Sie sehen den Sprung.

Sie konnten die Marge auf dem .flash halten .Notice

Quelle

2009-07-12 18:21:43

Ich habe versucht, alle Ränder und Padding zu entfernen, und das ist nicht das Problem. Der Inhalt nach der Nachricht wird überhaupt nicht verschoben, bis die Nachricht verschwindet. –

Dies ist ein bekannter Fehler in jrails ... löschen Sie die SlideUp/SlideDown-Funktionen von jrails und PRESTO! Hoffentlich wird dies in der nächsten Version von jrails behoben sein.

Quelle

2009-11-05 17:27:17 Jim

Nachdem JQuery slideUp() beendet den Rest des Inhalts springt an Ort und Stelle

Antwort

Verwandte Themen