0

私はいくつかのマイナーなhtml / jqueryロジックに苦労しています。

「仕事」と呼ばれる Div を取得し、その中にギャラリーがあります。

<div class="work">
        <span class="workTitle">A Work</span>
        <div class="gallery" style="" >
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
        </div>
    </div>

作品をクリックすると、次のクラスを切り替えることで、jquery で高さとマージンが変更されます。

work.click(function() {

    work.removeClass("on");
    $(this).addClass("on");
});

しかし、問題は、ギャラリー div を「作業」div に追加しようとすると、それらを非表示にして、「閉じた」高さが歪まないようにすることです。

また、「既に開いている」「作業」アイテムをクリックすると、「オン」クラスを再度閉じるのが好きです。しかし、ToggleClass はすべての作業を単独で開きます。1 つずつ閉じていくのではありません。

最後の質問は、高さをアニメートするにはどうすればよいですか? 特定の値を取得しましたが、余白パラメーターをアニメーション化するだけです。

前もって感謝します！

メチン。

また、なぜアイデアがうまくいかないのですか？

$(".work").click(function () {
    openWork($(this));
});


function openWork($) {
    $.animate({ marginLeft: openMargin }, 500, 'swing', function() {
        // completion handler
        $.animate({ height: workHeight }, 500, function () {
            closeWorks($(".work").not($(this)));
        });
    });
}

function closeWorks($) {
    $.animate({ height: '100%' }, 500, 'swing', function() {
        $.animate({ marginLeft: closedMargin }, 500, 'swing', function() {});
});

jq_array のアイデアを関数に分割しようとしました。openWorks(); 問題ないようですが、closeWorks(); うまくいかない...

4

1 に答える 1

1

うーん...あまりにも多くの異なる部分があるので、私はあなたの質問を分割します。とにかく、私のビット：

また、「既に開いている」「作業」アイテムをクリックすると、「オン」クラスを再度閉じるのが好きです。しかし、ToggleClass はすべての作業を単独で開きます。1 つずつ閉じていくのではありません。

$(".work").click(function() {
    jq_array = $(".work").not($(this));   //all the others
    jq_array.removeClass("on");           //close any other, if open
    $(this).toggleClass("on");            //open or close the clicked one
});

それで：

最後の質問は、高さをアニメートするにはどうすればよいですか? 特定の値を取得しましたが、余白パラメーターをアニメーション化するだけです。

var height_sttring = "200px";   // craft the height string

$('#selector').animate(
    { height: height_sttring }, //this is an hash, can contain more keys
    1000,                       // how many milliseconds
    function() {
    // completion handler
    }
);

しかし、問題は、ギャラリー div を「作業」div に追加しようとすると、それらを非表示にして、それらの「閉じた」高さが歪まないようにすることです。

あなたが何を意味するのか理解できません、ごめんなさい..
編集し てみてください：

.work {
    position: relative;
}
.work > .gallery {
    display: none;
    position: absolute;     // this way it will no more occupy "physical" space in the DOM.
    bottom: 10px;           // of course you can adjust this.
}
.work.on > .gallery {
    display: block;
}

これは機能するはずですが、アニメーションのタイミングに合わせるためにいくつかの実験を行う必要があります。最初にparentdiv.workを展開してから、innerをフェードインしdiv.galleryます。

于 2013-02-12T02:39:43.943 に答える