內聯Div的切換高度Div jQuery

Question

我卡住的同時動畫的高度爲div。有多個div與css float:left。當我click特殊div的高度應該增加。但是因爲它的高度增加了所有其他div的位置也不斷變化。我不希望他們改變他們的立場。我想要的是，只要低於target div的div應該向下移動而不會影響其他div。

Fiddle

這裏是代碼。

$("div").click(function() { 
 
    if ($(this).height() != 100) 
 
    $(this).animate({ 
 
     height: 100 
 
    }, 1000); 
 
    else 
 
    $(this).animate({ 
 
     height: 150 
 
    }, 1000); 
 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid; 
 
    float: left; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    HELLO WORLD 1 
 
</div> 
 
<div> 
 
    HELLO WORLD 2 
 
</div> 
 
<div> 
 
    HELLO WORLD 3 
 
</div> 
 
<div> 
 
    HELLO WORLD 4 
 
</div> 
 
<div> 
 
    HELLO WORLD 5 
 
</div> 
 
<div> 
 
    HELLO WORLD 6 
 
</div> 
 
<div> 
 
    HELLO WORLD 7 
 
</div> 
 
<div> 
 
    HELLO WORLD 8 
 
</div> 
 
<div> 
 
    HELLO WORLD 9 
 
</div> 
 
<div> 
 
    HELLO WORLD 10 
 
</div>

Answer 1

以下是使用列的解決方案。你可以調整窗口的大小和列重新填充：

var $boxes; 
 

 
$(document).ready(function() { 
 
    $boxes = $(".box"); 
 
\t setupColumns(); 
 
    $(window).on("resize", setupColumns); 
 
}); 
 

 
function setupColumns() { 
 
\t var $columnwrapper = $("#columns"); 
 
    var w = $("<div>").addClass("column").width(); 
 
    var cnt = Math.floor($columnwrapper.width()/w); 
 
    var cols = []; 
 
    for (var i = 0; i < cnt; i++) { 
 
    \t var $col = $("<div>").addClass("column"); 
 
    cols.push($col); 
 
    } 
 
    $columnwrapper.append(cols); 
 
    var cnt = 0; 
 
    $boxes.each(function() { 
 
    \t $(this).detach().appendTo(cols[cnt]); 
 
    cnt = (cnt + 1) % cols.length; 
 
    }); 
 
} 
 

 
$(".box").click(function() { 
 
    if ($(this).height() != 100) 
 
    $(this).animate({ 
 
     height: 100 
 
    }, 1000); 
 
    else 
 
    $(this).animate({ 
 
     height: 150 
 
    }, 1000); 
 
});

.column { 
 
    width: 114px; 
 
    float: left 
 
} 
 
.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid; 
 
    margin-bottom: 10px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="columns"></div> 
 
<div class="box"> 
 
    HELLO WORLD 1 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 2 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 3 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 4 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 5 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 6 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 7 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 8 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 9 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 10 
 
</div>

Answer 2

你需要清除每個新行的浮動。我建議將其從float: left;更改爲display: inline-block;，並且不要忘記添加vertical-align: top;。

div { 
    width: 100px; 
    height: 100px; 
    border: 2px solid; 
    margin: 10px; 
    display: inline-block; 
    vertical-align: top; 
} 

來切換元素的高度，而不會影響周圍的div將在現有的div絕對位置的項目的位置jsFiddle

Answer 3

的一種方式，然後切換這樣的高度來代替。

$("span").click(function() { 
 
    if ($(this).height() != 100) 
 
    $(this).animate({ 
 
     height: 100 
 
    }, 1000); 
 
    else 
 
    $(this).animate({ 
 
     height: 150 
 
    }, 1000); 
 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
    margin: 10px; 
 
    position: relative; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 2px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div><span> 
 
HELLO WORLD 1 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 2 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 3 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 4 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 5 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 6 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 7 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 8 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 9 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 10 
 
</span></div>

Answer 4

$("article").click(function() { 
 
    if ($(this).height() != 300) 
 
      $(this).animate({ height: 300 }, 1000); 
 
    else 
 
      $(this).animate({ height: 200 }, 1000); 
 
});

.column { 
 
    float: left; 
 
    width: 45%; /* or fixed amount */ 
 
    margin-right: 5%; /* or fixed amount */ 
 
} 
 

 
article { 
 
    border:1px solid; 
 
    margin-bottom: 24px; 
 
    background-color: #f6f6f8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column"> 
 
    <article> 
 
     <h2>Phasellus Molestie Magna</h2> 
 
     <p>Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Ut In Nulla Enim</h2> 
 
     <p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Curabitur Vulputate</h2> 
 
     <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Suspendisse Dictum Feugiat Nisl</h2> 
 
     <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.</p> 
 
    </article> 
 
</div> 
 

 

 
<div class="column"> 
 
    <article> 
 
     <h2>Donec Congue</h2> 
 
     <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Proin Quis Tortor</h2> 
 
     <p>Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Praesent Id Metus Massa, Ut</h2> 
 
     <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa.</p> 
 
    </article> 
 
</div>

剛剛更新小提琴這裏..它可能是什麼ü想：codehttp://jsfiddle.net/dssoft32/BqQF3/2/

Answer 5

你也應該改變你的病情：

if ($(this).height() != 100) 

到這樣的事情：

if ($(this).hasClass("div-100")) 

僅僅因爲在某些情況下$(this).height() <> 100。例如，對於Chrome的56.0.2924.87（64位），和DPI縮放級別爲Windows顯示125％：

• 縮放級別90％ - $(this).height() = 99.99999725097656
• 縮放級別100％ - $(this).height() = 100.00000457763672
• 縮放級別110％ - $(this).height() = 99.99999576416016