jQuery scale div Inhalt (verschachtelte div -)

Wie kann ich die blue-box auf Skala mit den roten? (mit Hilfe von jQuery-UI)

http://jsfiddle.net/Y54EB/1/

Dies ist der basic-code, CSS:

#outer {
    position:relative;
    height:100px;
    width:150px;
    z-index:1;
    background:#F00;
}
#nested {
    position:absolute;
    left:50px; top:20px;
    width:50px; height:20px;
    z-index:2;
    background:#00F;
    cursor:pointer;
}

Und HTML:

<div id="outer">
<div id="nested" onclick="$('#outer').effect('scale', {scale:'content',percent:50}, 1000);" />
</div>
im nicht sicher meinst du skalieren ... ich denke, Sie wollen die position zu ändern ?

InformationsquelleAutor julifos | 2012-02-09

  1. 3

    Ich weiß, das ist alt, aber wenn ich Sie richtig verstehe, habe ich versucht, das gleiche zu erreichen und stieß auf dieses jQuery-plugin, das die Arbeit macht:

    https://github.com/heygrady/transform/wiki

    Das ist absolut meine Lieblings-Antwort 😉 die Gestaltung mit Prozentzahlen nicht scheinen, wie eine gute Idee für mich, wie ich brauche, Dinge, wo Sie positioniert sein sollten, und ich kann nicht verbringen Zeit Berechnung Dinge wie 42.748%. Diese Transformation Zeug macht alles, als würden Sie die Skala, die Dinge in einer design-app (in einer Zeile). Schön!

    InformationsquelleAutor james

  2. 5

    Überprüfen Sie diese Geige: http://jsfiddle.net/techfoobar/Y54EB/4/

    Die Lösung ist im Grunde geben Sie die Abmessungen und position des verschachtelten div in % w.r.t. Elternteil als in Pixel.

    OMG!!! Es ist eine schöne Lösung, aber ich habe viele verschiedene Elemente innerhalb des div ist, es wäre eine nigthmare der Berechnung aller Prozentangaben. Also, es ist nicht möglich für jQuery skalieren nested-Feste-position-Elemente?
    Ja, es ist möglich. Aber wenn Sie benötigen, den verschachtelten Elementen, um die Größe wie die Eltern animiert (D. H. Kinder Größe & position animieren mit Eltern) auf eine kleinere/größere Größe, benötigen Sie eine CSS-basierte Lösung. Wenn seine ok, um die Größe der Kinder, nachdem die Eltern ist getan animieren, dann können Sie gehen für eine jquery-basierte Lösung.
    Ich will alles gleichzeitig skaliert, als ein block, in trotz der, wenn es die position ist, px oder %. In der Tat, ich bin eine lange Zeit flash-Entwickler zu kämpfen, mein Gehirn mit js + css 😉 BTW, ich bin jetzt dabei, meine unabhängige Elemente (statt Kinder in einem Eltern-div) und zu animieren, jeweils einzeln, die scheint konsequenter...

    InformationsquelleAutor techfoobar

  3. 2

    Ändern Sie Ihre CSS Prozentangaben statt :

    #nested {
    position:absolute;
    left:30%; top:20%;
    width:50%; height:20%;
    z-index:2;
    background:#00F;
    cursor:pointer;
}

    Diese Weise die #nested div ist immer im Verhältnis zu den outer div - hält auch seine Positionierung

    Beispiel arbeiten hier -> http://jsfiddle.net/Y54EB/5/

    InformationsquelleAutor ManseUK

  4. 1

    jquery:

    $('#outer, #nested').effect('scale', {scale:'content',percent:50}, 1000);

    wenn Sie wollen auch, um die Position des verschachtelten blue box, das nicht mit festen Pixel-Positionierung in CSS... %

    .Wirkung, ( - ) nutzt, jquery-ui, nicht gerade jquery (als die erste Zeile dieser Antwort-Staaten). Wollte nur, damit jeder ein heads-up =)

    InformationsquelleAutor ggzone

Schreibe einen Kommentar