2011-01-06 8 views
3

Ich möchte eine Rutsche mit jQuery, aber ich kann es nirgendwo finden.jQuery slide down toggle, unmöglich?

ich nicht möchte es scale as it slides
ich es will this action (klicken Sie auf Folie) durchzuführen, sondern senkrecht nach unten, nicht horizontal rechts.

UPDATE:

Also hier ist der letzte Funktionscode!

$(this).toggle(
    "slide", 
    { 
     direction: 'up', 
     duration: 'slow', 
     easing: 'easeOutQuart' 
    } 
); 
+1

slideDown wird beim Verschieben nicht skaliert. Ich verstehe nicht, wonach du fragst. – Mark

+1

Willst du mich verarschen ?? sogar die Grafik auf der Dokumentation zeigt den Skalierungseffekt http://see.weareinto.com/3tTu –

+0

verwenden: .animate ({Höhe: "Toggle"}, 300); –

Antwort

2

Lesen Sie die API-Docs: http://docs.jquery.com/UI/Effects/Slide

Sie in jeder Richtung die Richtung-Option schieben können.

Demo: http://www.jsfiddle.net/doktormolle/befbE/ (I bis 100% innerhalb des Schiebeelement die Breite/Höhe des Bildes festgelegt, so dass Sie sehen können, ist das Bild nicht skaliert, es abgeschnitten ist, denke, das ist, was Sie suchen)

+0

+1000 an! Ah! Genau das, was ich gesucht habe, obv ist auch jedem anderen entgangen! –

+0

+1000 mehr für lächerlich und werfen mein Bild da oben, hahaha! –

+0

Ich denke immer noch, es wäre dope, wenn es eine Kettenschaltung Funktion wäre tho .. hmm –

0

Wenn Sie es wollen, dass die Make eigene ur Sie, können Sie .animate() und Sie mit CSS.

so etwas wie:

css:

#elm { width: 150px; height: 80px; position: absolute; left: -150px; } 

Skript:

// let it animate 
$('#elm').animate({ display: 'block', left: 0 }, 'fast'); 

sonst, wenn Sie wollen, machen Sie es auf Ihrem eigenen, verwenden Sie das jQuery UI 'slide' Effekt nicht?

0

Ich weiß, was Sie meinen - die Elemente in der DIV oder was auch immer Sie animieren sehen aus, als ob sie verklappt sind, und dann erweitern.

Vielleicht in Betracht ziehen, das Element hinter einem anderen zu verstecken und entweder das Maskierungselement nach oben und aus dem Weg zu schieben oder das versteckte Element mit .animate() nach unten zu schieben?

jQuery .click .animate to move down, then back up

Dies kann helfen.

+0

Danke, aber nicht elegant - Ich bin froh, dass du weißt, was ich meine, ug ich verstehe nicht, wie andere es manchmal nicht sehen: O –

+0

Nein, es ist nicht perfekt, du könntest deine eigenen Methoden dafür entwickeln auf eine bessere Art und Weise. – diagonalbatman

0

Sie können dies leicht mit einem Innenbehälter erreichen, der feste Abmessungen hat.

See this live example. In der Geige ist der erste div ohne den inneren Behälter.

Auf diese Weise, wenn der äußere Container animiert (Breite/Höhe) wächst der innere Container nicht, einfach zeigt.

+0

Das sieht aus wie es aus der Ecke wächst: \ –

+0

Die Theorie ist für alle Animationen gleich. Ich habe einfach eine Show benutzt, die Breite/Höhe/Opazität zeigt. –

+0

Sorry, aber total nicht meine Frage –

1

Wenn Sie das Element absolut in einem Container positionieren und an der Unterseite befestigen (zB position:absolute;bottom:0;), können Sie den Blind-Effekt verwenden, der von oben nach unten gleitet. Siehe here

+0

Das sieht wirklich eng aus! aber wie kann ich es zeigen/verstecken, und kann es so einfach sein wie vielleicht ".verticalSlideToggle()" –

+0

Beachten Sie den unteren Rand von Tipp 10 - http://see.weareinto.com/3tln –

+0

@Kirk Strobeck: Ist [ das] (http://jsfiddle.net/UvxNd/2/) was willst du? –

0

Betrachten Ihre Bild von Höhe 150px

Erste height = "0"

Verwendung belebtes geltennach unten rutschen Wirkung

<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" /> 

<script> 
$(document).ready(function(){ 
    $("#image_scale").animate({height:"150px"},"5000"); 
}); 
</script> 
zu erreichen
+0

Das ist per definitionem SKALIERUNG: \ Ich will, dass es nach unten rutscht, nicht herunterskalieren, siehe Frage - Danke aber! –

0

Positionieren Sie das Element, das Sie ein- und ausschieben möchten, absolut.animate(), um seine Position zu ändern. Sie können es mit dieser Methode von oben, unten, links, rechts, diagonal oder beliebig einfügen lassen.

+0

Kann ich ein Beispiel sehen? Sieh dir das an http://jsfiddle.net/UvxNd/ –