编辑:
我为此做了一个 JSFiddle ......但我认为它不能正常工作,因为 (window).resize(); 我没怎么玩过 JSFiddle,所以我觉得我做错了。
http://jsfiddle.net/beefchimi/uhw3D/25/
如果有人可以帮助解决这个问题,我将不胜感激。
所以我一直在努力寻找用 jQuery 重现 CSS 媒体查询的绝对最佳方法。我几乎只使用 CSS 媒体查询,但我现在正在处理一个问题,我需要能够动态计算一个值并将其应用于窗口调整大小的元素。
使用下面的代码,我可以在每 1 个像素增量处检查窗口宽度。首先,我想知道这是否具有良好的性能,是否有办法只在我们从断点移动到断点(480 / 768 / 1024)而不是沿途的每个像素时执行函数。
然而,我的问题是:
我正在检查当前布局中有多少元素的 CSS 属性为 left: 0; 然后我将元素的数量乘以 240px 并将其应用为容器的高度值。
低于 720 像素,此元素的高度需要为“自动”。这工作正常。但是,如果我从 320 像素开始上升,并且遇到了第一个断点(720 像素),我就会将正确的高度应用到我的容器上,但是一旦我到达高于该值的断点(960 像素),高度就永远不会更新。我想知道我做错了什么导致无法计算和应用新值。
$(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 秒,我需要延迟我的函数触发这么多。对此有什么帮助吗?