切换内联Div JQuery的高度

Question

I got stuck while animating the height of the div .There are multiple div with css float:left .When I click the particular div its height should increase.But since its height is increasing all the other div's position is also changing.I dont want them to change their position.What I want is that the div just below the target div should move down without affecting the other div's.

Fiddle

Here is the code.

 $("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

You will need to clear the float on every new row. I would suggest to change it from float: left; to display: inline-block; , and don't forget to add vertical-align: top; .

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

jsFiddle

Answer 2

One way to toggle the elements' height without affecting the position of surrounding divs would be to absolutely position an item in the existing divs, then toggle that height instead.

 $("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 3

 $( "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> 

Just updated a fiddle here.. it may be what u want : code http://jsfiddle.net/dssoft32/BqQF3/2/

Answer 4

Here's a solution that uses columns. You can resize the window and the columns are repopulated:

 var $boxes; $(document).ready(function () { $boxes = $(".box"); setupColumns(); $(window).on("resize", setupColumns); }); function setupColumns() { 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++) { var $col = $("<div>").addClass("column"); cols.push($col); } $columnwrapper.append(cols); var cnt = 0; $boxes.each(function () { $(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 5

Also you should change your condition:

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

into something like that:

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

Just because in some cases $(this).height() <> 100 . For example for Chrome 56.0.2924.87 (x64), and DPI Scaling Level for Displays in Windows 125%:

• zoom level 90% - $(this).height() = 99.99999725097656
• zoom level 100% - $(this).height() = 100.00000457763672
• zoom level 110% - $(this).height() = 99.99999576416016