0

3行に9つのdivがあります。そのうちの1つをクリックすると、他のdivがfadeOutになります（問題ありません）。次に、クリックしたdivのサイズを、左、右、上、下から必要なサイズに変更します。 9divのスペースをすべてカバーします。そして、最初の行の最初のdivは左上隅にあるため、これを取得しましたが、他のdivでは、左上隅に移動してからサイズを変更します。元の場所にサイズを変更したいと思います。クリックしたとき。そしてもちろん、divの内側を中央に配置します。

私はjquery-uiで試してみましたが、かなり新しいので、非常に複雑になるかどうかはわかりません。「参照点からjqueryanimate（）」をグーグルで検索しましたが、何も得られませんでした。

皆さんありがとう！

    <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>位置を絶対位置に設定することです。

これを試して！

相対的な位置付けを持つDivでHTMLをラップします。

<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 に答える