jquery - 当 CSS 不是一个选项时使用 jQuery 进行媒体查询

Question

编辑:

我为此制作了一个 JSFiddle...但我认为它不会正常工作，因为 (window).resize();我没怎么玩过 JSFiddle，所以我觉得我做错了。

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

如果有人能帮助解决这个问题，我将非常感激。

---

所以我一直在努力寻找用 jQuery 重现 CSS 媒体查询的绝对最佳方法。我尽可能只使用 CSS 媒体查询，但我现在正在处理一个问题，我需要能够动态计算一个值并将其应用于窗口调整大小时的元素。

使用下面的代码，我可以每增加 1 个像素检查一次窗口宽度。首先，我想知道这是否是明智的性能，是否有一种方法可以仅在我们从断点移动到断点 (480/768/1024) 时而不是沿途的每个像素时执行函数。

但是我的问题是:

我正在检查当前布局中有多少元素具有 left: 0; 的 CSS 属性然后我将元素数乘以 240px，并将其用作容器的高度值。

低于 720px，此元素的高度需要为“自动”。这很好用。但是，如果我从 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 秒，我需要将我的函数延迟那么多。有什么帮助吗？

Answer 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)，高度就永远不会更新)

当然，当窗口大小大于 500px 时，section 高度不会改变，因为只有 3 行(100px x 3 = 300px 高度)和 section 的最大宽度 始终为 500px。 (每行 5 个盒子)你有 14 个盒子。 进行计算。

(我怎样才能延迟这个功能)

我不知道你为什么需要这个，但你可以使用 setTimeout()

你可以这样做:

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

在窗口调整大小时，该函数将在 0.2 秒后触发

我希望我确实理解你的意思，否则请解释更多你想做什么。