Auf hover, DIV erweitert und überlagert andere

Ich bin auf der Suche nach etwas sehr einfaches. Ich habe viele DIV-Boxen in einem raster angeordnet. Wenn ich hover-einer von Ihnen, ich will Sie langsam, verankert von der Mitte, und dann schrumpfen Sie wieder nach unten. Allerdings habe ich nicht in der Lage gewesen, so zu tun, ohne das andere DIV-Boxen wird beiseite geschoben. Ich möchte die DIV-Wesen schwebte auf, erweitern Sie langsam, überlappende der anderen DIV-Boxen, ohne Sie zu bewegen.
Ich habe erreicht, einige von diesen mit JQuery.
Hier ist, was ich habe:

CSS:

div{width: 100px; height: 100px; float: left;}
div#sq1{background-color: magenta;}
div#sq2{background-color: yellow;}
div#sq3{background-color: cyan;}

JQuery:

<script type='text/javascript' src='animated.js'></script>
<script type="text/javascript">
$(document).ready(function() {
    $("div").hover(function(){
        if (!$(this).hasClass('animated')) {
            $(this).dequeue().stop().animate({ width: "100px", height: "100px" });
    }
    }, function() {
        $(this).addClass('animated').animate({ width: "200px", height: "200px" }, "normal", "linear", function() {
        $(this).removeClass('animated').dequeue();
    });
});
</script>

HTML:

<div id="dequeue" class="blocks">
<div id="sq1"></div>
<div id="sq2"></div>
<div id="sq3"></div>
</div>

Hier ist, wie ich es Aussehen soll:
Vor : http://i39.tinypic.com/dh9x87.png
Nach: http://i44.tinypic.com/70cd35.png

Dank!

was ist animated.js?
Ich sehe neun Felder in der Bild-und drei Kisten in das markup, das du gepostet hast. das verwirrt mich 🙂

InformationsquelleAutor user1347788 | 2012-04-21

  1. 1

    Versuchen Sie es mit negative Margen trick, um die Seite zu denken, jede box ist immer noch 100px x 100px. Also zusätzlich zu animieren, die Breite und Höhe von 100px, 200px, auch animieren die Marge von 0-50px.

    Hoffe, das hilft 🙂

    BEARBEITEN

    Hier ist ein funktionierendes Beispiel:

    http://jsfiddle.net/sGDvj/1/

    InformationsquelleAutor LukeGT

  2. 0

    Ich glaube, ich verstehe, was Sie versuchen zu tun 😀 auch wenn ich nicht eine 100% positive Antwort, ich habe einen Vorschlag, versuchen zu spielen, um mit dem z-index des divs, vielleicht machen Sie die eine, die Sie überfahren zu so etwas wie 5 oder was auch immer positive Zahl, die Sie wollen!

    InformationsquelleAutor Jeremy Sayers

  3. 0

    warum nicht mit absoluten Positionen? oder einen anderen Weg, es zu tun ist, um ein Duplikat zu erstellen div über die, schwebte über der Animation statt.

    InformationsquelleAutor akonsu

  4. 0

    Nur verwenden, CSS3 einfach und leicht

    http://jsfiddle.net/mhkfH/

    Ausgezeichnet, danke! Hier ist ein Beispiel: jsfiddle.net/4uvfZ (Beachten Sie die änderung, um die erste Auswahl)

    InformationsquelleAutor Stian

  5. 0

    Haben Sie einen Blick auf diese http://jsfiddle.net/tdsNF/2/
    und siehe Erweitern /verkleinern div auf schweben /out mit jQuery für die credits.

    InformationsquelleAutor Max

  6. 0

    Werfen Sie einen Blick auf dieses Beispiel; ich denke, das ist, was Sie tun möchten.
    http://jsfiddle.net/tdsNF/2/

    Es ist ein expander mit Bildern, aber divs funktioniert, glaube ich.

    Finden Sie hier: Erweitern /verkleinern div auf schweben /out mit jQuery

    var $imageWidth     = 92,    //with borders
$imageColumns    = 10;    //images across

$("#container > div .img").each(function(index) {
var $left = (index % $imageColumns * $imageWidth);
$(this).css("left", $left + "px");
});

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index", 1);
    $(this).stop(true,true).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
    $("#name").css("color", "#242424").html($(this).attr("data-name"));
    $("#school").css("color", "#242424").html($(this).attr("data-school"));
}, function() {
$(this).closest(".img").css("z-index", 0);
$(this).stop(true,true).animate({ height: "90", width: "90", left: "+=55", top: "+=55"     }, "fast");
});​
    Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert.
    Ich nehme an, meine SO-Etikette ist noch ein bisschen unfein. Danke für den Tipp, gut zu wissen.

    InformationsquelleAutor tamsanh

Schreibe einen Kommentar