Ein div mit jQuery erweitern lassen, ohne dass die Divs darauf verschoben werden

  • Ich versuche, einen Effekt zu erzielen, der dem unter http://www.nokiausa.com/us-de/products/ mit einem Raster grundlegender Informationen, wobei ein Klick Informationen über ein benachbartes Element erweitert.

    < Ein Problem, das ich habe, ist, dass das Erweitern meines divs das benachbarte div bewegt. Ich denke, ich muss möglicherweise die Klonfunktion verwenden, um ein Kind mit absoluter Positionierung zu erzeugen, aber ich bin mir nicht sicher, wie ich das wirklich tun würde.

     <head>
    <script src="jquery-1.7.min.js"></script>
    <script src="jquery.color.min.js"></script>
    <script type="text/javascript">
        function growRight(){
            $('#stuff1').animate({
                backgroundColor: "#FF8600"
            }, 750 );
            $('#stuff1').animate({
                width: "510px"
            }, 750, function() {});
        }
    
    </script>
    <style>
        ul{
        display:block;
        width:520px;
        background-color:#888888;
        }
    
        li{
        position:relative;
        overflow:hidden;
        display:block;
        float:left;
        height:250px;
        width:250px;
        background-color:#B8B8B8;
        margin:5px;
        }
    
        p{
        display:block;
        }
    
        div.contentright{
        position:absolute;
        top:0px;
        left:250px;
        width:260px;
        height:250px;
        }
    
        .clearLeft{
        clear:left;
        }
    </style>
    </head>
    <body>
    <ul id="gridbox">
        <li class="stuff" id="stuff1">
            <a href="javascript:growRight()">Stuff 1</a>
            <div class="contentright">
                This is a load of content. Content content content.
            </div>
        </li>
        <li>
            Stuff 2
        </li>
        <li>
            Stuff 3
        </li>
        <li>
            Stuff 4
        </li>
    </ul>
    </body>
     
    22 November 2011
    Hal Clive
4 answers
  • Meiner Meinung nach erfordert dies eine kluge Verwendung von position:absolute. z-index legt nur die Reihenfolge für Elemente fest, die an erster Stelle übereinander erscheinen würden.

    22 November 2011
    egasimus
  • Ist das, was Sie meinen?

    Bitte entschuldigen Sie die grausige Formatierung, ich habe sie schnell geschrieben

    < a href = "http://jsfiddle.net/y3QBw/5/" rel = "nofollow"> http://jsfiddle.net/y3QBw/5/

     var li_original_height = $('#stuff1').css('z-index');
    
    function growRight() {
        var $stuff = $('#stuff1'),
            li_left = $stuff.offset().left,
            li_top = $stuff.offset().top,
            li_stuff_width = $stuff.outerWidth(true) + 5,
            $sibling = $stuff.next();
    
        $sibling.css('margin-left', li_stuff_width);
        $stuff
            .css({
                'z-index': 1000,
                background: '#588EC8',
                position: 'fixed',
                top: li_top,
                left: li_left,
                margin: 0
            })
            .animate({
                width: "510px"
            }, 750, function() {});
    }
    
    function hideRight() {
        var $stuff = $('#stuff1'),
            $sibling = $stuff.next();
    
            $stuff.animate({
                width: "250px"
            }, 750, function() {
                $stuff.css({
                    'z-index': li_original_height,
                    background: '#B8B8B8',
                    position: 'relative',
                    top: 'auto',
                    left: 'auto',
                    margin: 5
               });
                $sibling.css('margin-left', 5);
            });
    
    }
    
    $('#stuff1 a').toggle(
        function () {
            growRight(); 
            return false;
        },
        function () {
            hideRight(); 
            return false;
        }
    );
     
    11 February 2014
    Jaykizi
  • Ok, ich habe eine Lösung gefunden, die der von mir in der Frage erwähnten Herangehensweise ziemlich folgt - dies klont die Zelle, die wiederum animiert. CSS-Eigenschaften sorgen dafür, dass "expandinatorright" absolut auf dem übergeordneten Element liegt (natürlich sorgt z-index dafür, dass es über allen anderen gerendert wird).

         function growRight(){
            $('.stuff')
                .clone(false)
                .addClass('expandinatorright')
                .appendTo($('.stuff'));
            $('.expandinatorright').animate({
                backgroundColor: "#FF8600"
            }, 750 );
            $('.expandinatorright').animate({
                width: "510px"
            }, 750, function() {});
        }
     

    Ich hoffe, das ist nützlich für alle, die auf ein ähnliches Problem stoßen könnten.

    22 November 2011
    Hal Clive
  • Wenn Sie nur kurz darauf eingehen, würde ich vorschlagen, dass Sie vor dem Animieren eine z-index -Eigenschaft zu dem Element hinzufügen, das Sie vergrößern möchten. Dadurch sollte es über das benachbarte Element gehen und es ausblenden, anstatt es nach unten zu drücken.

    Etwas wie:

     
    function growRight(){
            $("#stuff1").css("z-index","5");
            $('#stuff1').animate({
                backgroundColor: "#FF8600"
            }, 750 );
            $('#stuff1').animate({
                width: "510px"
            }, 750, function() {});
        }
     
    22 November 2011
    jezza-tanuser1453918