Question

我有9个div，每行3个。当我点击其中一个时，我想要其他人fadeOut（没关系，任何问题）然后我点击的那个从左，右，顶部和底部调整它需要的任何东西，直到它覆盖所有9个div空间。我得到了第一排的第一个div，因为它位于左上角，但是与其他的一起，它们会进入左上角然后调整大小，我想在它们所在的位置调整它们的大小当我点击时然后将div的内部居中。

我正在尝试使用jquery-ui，我对此很新，所以我不知道它是否会非常复杂。我从谷歌搜索“jquery animate（）”，但我没有得到任何东西......

谢谢大家！

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

多数民众赞成我拥有，非常简单。

Answer 1

它在调整大小之前跳到左上角的原因是因为所有其他<p>的{{1}}设置为display。解决方案是在调整大小之前将当前none设置为绝对位置。

试试这个！

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

<p>

请注意，这些都不需要jQuery.UI。它将适用于简单的jQuery：）

这里有一个jsfiddle来展示它的实际效果：http://jsfiddle.net/Fgb9b/1/

享受！

Animate（）来自参考点？

1 个答案: