0

私はこの答えを得た同様の質問をしましたが、それを使用可能なマークアップに移動しようとすると、運が悪くなります。

基本的に、4 div x 3 div の行があります。クリックすると、グリッド内の他のすべての div を展開し、必要に応じて切り替えるには、次の div が必要です。animate と toggle を使用してみましたが、役に立ちませんでした。ここでテーブルを使用した一例http://jsfiddle.net/gGc5K/。

可能であれば nexr メソッドを使用して、次のマークアップを同じように (トグルを閉じて) 動作させる必要があります。

ありがとう

  <!--div in the grid--><div class="gridBox" id="one"></div>
    <div class="pop" id="bigOne">Content here and a toggle link</div><!--This div needs to expand over the full grid-->

 <!--div in the grid--><div class="gridBox" id="two"></div>
    <div class="pop" id="bigTwo">Content here and a toggle link</div><!--This div needs to expand over the full grid-->
4

1 に答える 1

0 
var top = 0,
    left = 0;

$("td").click(function() {
    var ref = $(this);
    if ($(this).hasClass('currentAnimated')) {
        $(this).css({
            "z-index": 1
        }).animate({
            top: top,
            left: left,
            width: "40px",
            height: "39px"
        }, "4s", function() {
            ref.removeClass('currentAnimated');
        })
    } else {
        top = $(this).position().top;
        left = $(this).position().left;
        $(this).css({
            "z-index": 1
        }).animate({
            top: 0,
            left: 0,
            width: "120px",
            height: "120px"
        }, "4s", function() {
            ref.addClass('currentAnimated')
        });
    }
});

デモ

于 2012-05-28T11:19:06.767 に答える