需要jQuery Equal Height平滑过渡到响应大小

时间:2017-06-30 17:57:50

标签: jquery

当页面宽度小于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;
}

谢谢!

0 个答案:

没有答案