Javascript 是否从参考点设置（）div的动画？

我有9个div，一行3个。当我点击其中一个，我希望其他的淡出（没关系，任何问题），然后我点击的那个，从左，右，上，下调整它需要的任何东西，直到它覆盖了所有的9个分区空间。对于第一行的第一个div，我得到了它，因为它在左上角，但是对于其他div，它们进入左上角，然后调整大小，我想在我单击时调整它们的大小。然后将div的内侧居中

我正在用jQueryUI尝试它，我对它还很陌生，所以我不知道它是否会非常复杂。我在谷歌上搜索了“jquery animate（）（from reference point）”，但没有得到任何结果

谢谢大家

    <div id="row1" class="row-fluid">
    <p id="p1" class="hero-unit span4 ">P número 1</p>
    <p id="p2" class="hero-unit span4 ">P número 2</p>
    <p id="p3" class="hero-unit span4 ">P número 3</p>
    </div>

    <div id="row2" class="row-fluid">
    <p id="p4" class="hero-unit span4 ">P número 4</p>
    <p id="p5" class="hero-unit span4 ">P número 5</p>
    <p id="p6" class="hero-unit span4 ">P número 6</p>
    </div>

    <div id="row3" class="row-fluid">
    <p id="p7" class="hero-unit span4 ">P número 7</p>
    <p id="p8" class="hero-unit span4 ">P número 8</p>
    <p id="p9" class="hero-unit span4 ">P número 9</p>
    </div>


    $(document).ready(function() {
        $("p").click(function() {
            current = $(this);
            $("p").not(this).fadeOut(1000, function(){
                current.animate({
                    margin: "0px",
                    height: "420px",
                    width: "940px",
                }, 1000, function(){
                    current.removeClass("span4");
                }); 
            });
        });
    });

p努梅罗1号

p努梅罗2号

p努梅罗3号

p努梅罗4号

p努梅罗5号

p努梅罗6号

p努梅罗7号

p努梅罗8号

p努梅罗9号

$（文档）.ready（函数（）{
$（“p”）。单击（函数（）{
当前=$（本）；
$（“p”）.not（this）.fadeOut（1000，function（）{
当前动画({
边距：“0px”，
高度：“420px”，
宽度：“940px”，
}，1000，函数（）{
当前删除类（“span4”）；
}); 
});
});
});

---

这就是我所拥有的，非常简单。

它在调整大小之前跳到左上角的原因是因为所有其他

的

显示设置为
无
。解决方案是在调整大小之前将当前的
设置为绝对位置

试试这个

将HTML包装在具有相对位置的Div中：

<div id='container' style="position: relative;">
    <div id="row1" class="row-fluid">
    <p id="p1" class="hero-unit span4 ">P número 1</p>
    <p id="p2" class="hero-unit span4 ">P número 2</p>
    <p id="p3" class="hero-unit span4 ">P número 3</p>
    </div>

    <div id="row2" class="row-fluid">
    <p id="p4" class="hero-unit span4 ">P número 4</p>
    <p id="p5" class="hero-unit span4 ">P número 5</p>
    <p id="p6" class="hero-unit span4 ">P número 6</p>
    </div>

    <div id="row3" class="row-fluid">
    <p id="p7" class="hero-unit span4 ">P número 7</p>
    <p id="p8" class="hero-unit span4 ">P número 8</p>
    <p id="p9" class="hero-unit span4 ">P número 9</p>
    </div>
</div>​​​​​


$(document).ready(function(){
$("p").click(function(){
    current = $(this);  
    var position = current.position();
    $("p").not(this).fadeOut(1000, function(){
        // set the current position to absolute with the top and left dimensions the same;
        current.css({
            'postition' : 'absolute',
            'left' : position.left,
            'top' : position.top,
        });
        current.animate({
            margin: "0px",
            height: "420px",
            width: "940px"
            top: "0px",
            left: "0px"
        }, 1000, function(){
            current.removeClass("span4");
        }); 
    });

});
});​


p努梅罗1号

p努梅罗2号

p努梅罗3号

p努梅罗4号

p努梅罗5号

p努梅罗6号

p努梅罗7号

p努梅罗8号

p努梅罗9号

​​​​​
$（文档）.ready（函数（）{
$（“p”）。单击（函数（）{
当前=$（本）；
var position=当前位置（）；
$（“p”）.not（this）.fadeOut（1000，function（）{
//将当前位置设置为绝对位置，使顶部和左侧尺寸相同；
current.css({
'位置'：'绝对'，
“left”：position.left，
“top”：position.top，
});
当前动画({
边距：“0px”，
高度：“420px”，
宽度：“940px”
顶部：“0px”，
左：“0px”
}，1000，函数（）{
当前删除类（“span4”）；
}); 
});
});
});​

请注意，这些都不需要jQuery.UI。它将在普通jQuery上工作：）

下面是一个jsfiddle来展示它的作用：

享受吧
 点击prepend new items希望您正在寻找此项并发布一些代码您做了什么？谢谢Rajat Modi，但这不是我要寻找的。我想，如果我点击“p5”，其他的将消失，p5将扩展到4个角，直到它具有我想要的所有宽度和高度。是的！谢谢你！那正是我想要的！只有一个问题。。我完全复制了所有内容，但它不起作用…-。-我使用了最新版本的jquery，不是jquery.ui，我使用了normalize.css（我不知道），但它不起作用。你看到我链接到的JSFIDLE了吗？它正在工作，你能修改你的代码使它像小提琴一样工作吗？如果不看更多的代码，我将无法进一步帮助您。是的，我看到了它，我照着原样复制了它。但是我的jsFiddle没有normalize.css，看起来像你的jsFiddle。但是我有normalize.css。。。这是我的代码：谢谢。我看到你的代码有点不同，在动画中你将其设置为300px，而在js小提琴上设置为150px。它在你的网站上根本不起作用，还是只是有点做错了？如果有一点错误，你需要相应地改变宽度/高度。对不起，我尝试了一些东西，但忘了再次更改。JSFIDLE的唯一区别是行之间的距离，你没有，我有10px左右，我不知道为什么，因为我只使用normalize.css和你发布的。我在crrome、chromium和firefox中试用过，你的在没有填充/边距的情况下运行良好，但我的不行。我认为normalize.css不起作用，因为如果我退出你的jsfiddle normalize.css，它看起来和我的一模一样。谢谢