Question

我尝试使用基本信息网格获得类似于您在http://www.nokiausa.com/us-en/products/可以找到的效果，其中点击可以扩展相邻项目上的信息。

我遇到的一个问题是扩大我的div正在使邻近的div移动 - 我想我可能必须使用克隆功能来产生一个具有绝对定位的孩子，但我不确定我是怎么做的实际上会这样做。

<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>

Answer 1

在我看来，这需要巧妙地使用position:absolute。 z-index仅设置首先出现在彼此之上的元素的顺序。

Answer 2

这就是你的意思吗？

请原谅可怕的格式，我快速写了

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;
    }
);

Answer 3

好的，我设法找到了一个解决方案，它几乎遵循我在问题中提到的方法 - 克隆了单元格，而单元格又是动画。 CSS属性确保“expandinatorright”完全位于其父级之上（当然，使用z-index确保它呈现在其他所有内容之上）。

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

我希望这对可能遇到类似问题的人有用。

Answer 4

快速尝试一下，我建议在动画制作之前，将z-index属性添加到您想要放大的元素中。这应该使它高于相邻元素并隐藏它而不是将其向下推。

类似的东西：


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

使用jQuery扩展div，而不会将div移动到它上面

4 个答案: