Переключить высоту встроенного Div JQuery

Я застрял во время анимации высоты div. Есть несколько div с css float:left. Когда я click, конкретный div его высота должна увеличиваться. Но так как его высота увеличивает все остальные позиции div также меняются. Я не хочу, чтобы они меняли свое положение. Что я хочу, так это то, что div чуть ниже target div должен двигаться вниз, не затрагивая другие div.Переключить высоту встроенного Div JQuery

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>

источник

2017-02-22 shubham agrawal

Вот решение, которое использует столбцы.Вы можете изменить размер окна и столбцы заселены:

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>

источник

2017-02-22 16:57:16

Скриншот для легкого изменения размера: https://jsfiddle.net/6md9wrxL/3/ –

, хотя эта скрипка работает только в mozilla, но после нескольких изменений она отлично работает во всех браузерах. –

Обновленная рабочая скрипка: https://jsfiddle.net/7ztj63mj/ –

Вам нужно будет очистить поплавок на каждой новой строке. Я бы предложил его изменить с float: left; до display: inline-block;, и не забудьте добавить vertical-align: top;.

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

jsFiddle

источник

2017-02-22 16:41:13 Stickers

Это похоже на то, что я ищу, но я хочу, чтобы ДИВ в колонке целевых дивов должен двигаться вниз не другие divs –

Если это так, вы должны иметь максимальную высоту и оставить ее пустой. Таким образом, когда он растягивается, другие не будут двигаться. Кроме того, если вы хотите, чтобы он поднялся на другие, когда он растянулся. –

@shubhamagrawal Я вижу, можете ли вы поместить каждую группу блоков в столбец? поэтому они будут в нескольких столбцах. – Stickers

Один из способов переключения высоты элементов, не влияя на положение окружающих дивы будет абсолютно позиционировать элемент в существующих дивы, а затем переключить вместо этого высоту.

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

источник

2017-02-22 16:44:36

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

источник

2017-02-22 16:50:28

-1

Кроме того, вы должны изменить свое состояние:

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

во что-то вроде этого:

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

Просто потому, что в некоторых случаях $(this).height() <> 100. Например, для Chrome 56.0.2924.87 (x64) и DPI Scaling уровня для дисплеев в Windows, 125%:

уровень масштабирования 90% - $(this).height() = 99.99999725097656
уровень масштабирования 100% - $(this).height() = 100.00000457763672
уровень масштабирования 110% - $(this).height() = 99.99999576416016

источник

2017-02-22 16:56:00 kb0

Это комментарий, а не ответ. –

Переключить высоту встроенного Div JQuery

ответ

Смежные вопросы