Making a div expand with jQuery without moving divs floating to it

前端 未结 4 682
执念已碎
执念已碎 2021-01-16 00:24

I\'m trying to get an effect similar to what you can find at http://www.nokiausa.com/us-en/products/ with a grid of basic information, where a click expands information over

相关标签:
4条回答
  • 2021-01-16 00:33

    Is this what you were meaning?

    Please excuse the horrendous formatting, I wrote it quickly

    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;
        }
    );
    
    0 讨论(0)
  • 2021-01-16 00:36

    In my opinion, this calls for some clever usage of position:absolute. z-index only sets the order for elements that would appear on top of each other in the first place.

    0 讨论(0)
  • 2021-01-16 00:48

    Ok, I managed to find a solution which pretty much follows the approach I mentioned in the question - this clones the cell, which in turn animates. CSS properties ensure "expandinatorright" sits absolutely on top of its parent (of course, with z-index making sure it is rendered above everything else).

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

    I hope this is useful for anyone who might run into a similar problem.

    0 讨论(0)
  • 2021-01-16 00:55

    Just taking a quick stab at this, I would suggest that before animating, add a z-index property to the element that you wish to enlarge. This should make it go above the neighboring element and hide it instead of pushing it down.

    Something like:

    
    function growRight(){
            $("#stuff1").css("z-index","5");
            $('#stuff1').animate({
                backgroundColor: "#FF8600"
            }, 750 );
            $('#stuff1').animate({
                width: "510px"
            }, 750, function() {});
        }
    
    0 讨论(0)
提交回复
热议问题