0

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

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

4

1 回答 1

1

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

尝试这个！

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

});
});​

请注意，这些都不需要 jQuery.UI。它适用于普通的 jQuery :)

这里是一个 jsfiddle 来展示它：http: //jsfiddle.net/Fgb9b/1/

享受！

于 2012-10-02T14:21:33.213 回答