当页面宽度小于768像素时,如何更新我的jQuery以从平等高度 divs 平滑过渡到不等高度 divs ? / p>
我创建了jQuery等高码,当页面宽度超过768像素时应用。
然而,将页面宽度从大于768像素宽变为小于768像素宽我在页面中看到一个闪烁,其中等高 divs 的样式快速从<强度>高度像素样式(如高度:104px )到高度:自动,不到一秒钟。
的jsfiddle
https://jsfiddle.net/risingPhoenix1979/mwgs7Lex/2/
的jQuery
function equalHeight(group) {
var windowWidth = $(window).width();
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
if(windowWidth > 768) {
group.height(tallest);
}
else if((windowWidth <= 768)) {
group.css('height', 'auto');
}
}
$(window).on('load resize', function() {
equalHeight($('.sameHeight'));
});
HTML
<div class='sameHeight'><p>One<br>two<br>three<br>asdfsdafkjdsafasdffa asdfaksdfadsk asdfkadsfjdsak asdf asdfkdas sdaf sdfkdsjsdadiewruwei asdfksdfk</p></div>
<div class='sameHeight'><p>four</p></div>
<div class='sameHeight'><p>four</p></div>
<div class='sameHeight'><p>four</p></div>
<div class='sameHeight'><p>four</p></div>
<div class='sameHeight'><p>four</p></div>
<div class='sameHeight'><p>four</p></div>
<div class='sameHeight'><p>four</p></div>
CSS
div {
border: 1px solid green;
}
谢谢!