使用jQuery扩展一个div，而不移动浮动的div_Jquery_Css Float

使用jQuery扩展一个div，而不移动浮动的div

jquery

使用jQuery扩展一个div，而不移动浮动的div,jquery,css-float,Jquery,Css Float,我试图获得一种类似于基本信息网格的效果，点击可以将信息扩展到相邻的项目上我遇到的一个问题是，扩展我的div会使相邻的div移动-我想我可能必须使用clone函数来生成具有绝对定位的子对象，但我不确定我实际上如何做到这一点 <head> <script src="jquery-1.7.min.js"></script> <script src="jquery.color.min.js"></script> <script type

我试图获得一种类似于基本信息网格的效果，点击可以将信息扩展到相邻的项目上

我遇到的一个问题是，扩展我的div会使相邻的div移动-我想我可能必须使用clone函数来生成具有绝对定位的子对象，但我不确定我实际上如何做到这一点

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

我建议在设置动画之前，向希望放大的元素添加一个z-index属性。这将使它位于相邻元素上方并隐藏它，而不是将其向下推

比如：


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

我建议在设置动画之前，向希望放大的元素添加一个z-index属性。这将使它位于相邻元素上方并隐藏它，而不是将其向下推

比如：


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

在我看来，这需要巧妙地使用位置：绝对。z-index只设置元素的顺序，这些元素首先会出现在彼此的顶部。

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

好的，我设法找到了一个解决方案，该解决方案基本上遵循了我在问题中提到的方法-这将克隆单元，然后生成动画。CSS属性确保expandinatorright绝对位于其父级之上，当然，z索引确保它的渲染高于其他所有内容

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

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

好的，我设法找到了一个解决方案，它几乎遵循了我在问题中提到的方法-这是克隆细胞，而细胞反过来会产生动画。CSS属性确保expandinatorright绝对位于其父级之上，当然，z索引确保它的渲染高于其他所有内容

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

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

这就是你的意思吗

请原谅这些可怕的格式，我写得很快

这就是你的意思吗

请原谅这些可怕的格式，我写得很快

我会创建一个JSFIDLE，以便更容易看到您的问题。你可能有我们看不到的css或js，因此如果你可以在JSFIDLE上复制它，那么我们就可以解决沙盒问题。这不是立即有用的，但他们的所有代码都可以查看他们是如何做到的例如，每行4实际上被细分为2，以适应扩展div需要的方向。从快速检查中我可以看出，他们正在使用浮动。@Robotsushi，这是我现在所有的代码-唯一没有列出的代码是jQuery库和允许彩色动画的彩色插件。我把它复制到了这里：我将创建一个JSFIDLE，以便更容易看到您的问题。你可能有我们看不到的css或js，因此如果你可以在JSFIDLE上复制它，那么我们就可以解决沙盒问题。这不是立即有用的，但他们的所有代码都可以查看他们是如何做到的例如，每行4实际上被细分为2，以适应扩展div需要的方向。从快速检查中我可以看出，他们正在使用浮动。@Robotsushi，这是我现在所有的代码-唯一没有列出的代码是jQuery库和允许彩色动画的彩色插件。我只是把它复制到了一把小提琴上：我希望它能这么简单，但正如另一个人所说，我认为z-index不能像那样工作。即使这样做了，它仍然会因为让div向后滑动而打乱布局……我希望它这么简单，但正如另一个人所说，我认为z-index不是那样工作的。即使它这样做了，它仍然会让div向后滑动，从而打乱布局……我在想这个问题，但这可能需要jQuery克隆div，然后给这个克隆一个绝对位置。我真的不知道该怎么做。element.clone.appendTotarget应该让你开始：谢谢，伙计，在你的帮助下，我现在已经做到了。我将把这个解决方案作为一个单独的答案发布。我是这么想的，但这可能需要jQuery克隆div，然后给这个克隆一个绝对位置。我真的不知道该怎么做。element.clone.appendTotarget应该让你开始：谢谢，伙计，在你的帮助下，我现在已经做到了。我将把解决方案作为单独的答案发布。