4

編集：

このためにJSFiddleを作成しました...しかし、（window）.resize（）;のため、正しく機能しないと思います。私はJSFiddleであまり遊んだことがないので、これを間違えたような気がします。

http://jsfiddle.net/beefchimi/uhw3D/25/

誰かがこの問題を手伝ってくれるなら、私は本当にそれをいただければ幸いです。

そのため、jQueryを使用してCSSメディアクエリを再現するための絶対的な最善の方法を見つけるのに苦労してきました。可能な場合はほぼ排他的にCSSメディアクエリを使用しますが、現在、値を動的に計算してウィンドウサイズ変更時に要素に適用できるようにする必要があるという問題に取り組んでいます。

以下のコードを使用して、1ピクセル単位でウィンドウ幅を確認できます。まず、これはパフォーマンスの面で優れているのではないかと思います。代わりに、途中のすべてのピクセルではなく、ブレークポイントからブレークポイント（480/768/1024）に移動したときにのみ関数を実行する方法があるのでしょうか。

しかし私の問題はこれです：

現在のレイアウトでCSSプロパティがleft：0の要素がいくつあるかを確認しています。次に、要素の数に240pxを掛けて、それをコンテナの高さの値として適用します。

720px未満では、この要素の高さは「auto」である必要があります。これは正常に機能します。しかし、320pxから上昇し、最初のブレークポイント（720px）に到達すると、コンテナーに適切な高さが適用されますが、その上のブレークポイント（960px）に到達すると、高さは更新されません。新しい値の計算と適用を妨げているのは、何が間違っているのか疑問に思っています。

$(document).ready(function() {

    function checkWidth() {

        var windowSize = $(window).width();
        var elementCount = $('#casestudy-content article').filter(function() { return $(this).position().left === 0 }).length;

        if ( windowSize >= 720 && windowSize <= 959 ) {

            console.log("Greater than 720 and less than 960");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else if ( windowSize >= 960 && windowSize <= 1199 ) {

            console.log("Greater than 960 and less than 1200");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else if ( windowSize >= 1200 ) {

            console.log("Greater than or equal to 1200");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else {

            $('#casestudy-content').css('height', 'auto');

        }

    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);

});

どんな助けでも大歓迎です。

編集

そこで、これらの要素のCSSトランジションを削除すると、関数が完全に機能することを発見しました。

興味深いことに、私のconsole.log（elementCount）は、ブレークポイントに到達した瞬間に正しい値を報告するので、遷移時間を気にする必要がないことを意味すると思いますが、明らかにそうです。トランジションを維持できるように、この関数を遅らせるにはどうすればよいですか？遷移に0.2秒かかる場合は、関数の起動をその分遅らせる必要があります。これについて何か助けはありますか？

4

1 に答える 1

1

(ブレークポイントからブレークポイントに移動するときに関数を実行します)

現在のブレークポイントで変数に保存します。

var breakpoint;
function checkWidth() {
{...}
if ( windowSize >= 720 && windowSize <= 959 && breakpoint != 720) {
        breakpoint = 720;
} else if ( windowSize >= 960 && windowSize <= 1199 && breakpoint != 960) {
        breakpoint = 960;
} etc..

http://jsfiddle.net/uhw3D/47/

(ただし、その上のブレークポイント (960px) に達すると、高さは更新されません)

もちろん、sectionウィンドウ サイズが 500px を超える場合、高さは変わりません。これは、3 行 (100px x 3 = 高さ 300px) しかなく、最大幅sectionが常に 500px であるためです。(1 行に 5 ボックス)、14 個のボックスがあります。計算を行います。

(どうすればこの機能を遅らせることができますか)

なぜこれが必要なのかわかりませんが、使用できますsetTimeout()

次のようなことができます：

$(window).resize(function() {
    setTimeout(checkWidth, 200); // 1000 milliseconds = 1 second
 });

ウィンドウのサイズを変更すると、関数は 0.2 秒後に起動されます

私はあなたが何をしたいのかをもっと説明してください.

于 2012-09-01T19:58:37.450 に答える