I have a container with images and a "load more" button to add more images. It works, but I want to make a smooth opening from top to bottom, but I fail. I added 'opacity' to see it works, but still, 'transition' doesn't happen. I looked at other people's examples, where the code works using the height of the container, but I add the number of images, I want to add 6 images and smoothly. How can do this correctly?
let data = Array.from(document.querySelectorAll('.block .item')),
step = 6,
item = 0;
data.slice(step).forEach(e => e.style.display = 'none');
item += step;
document.querySelector('#load').addEventListener('click', function(e){
let tmp = data.slice(item, item + step);
tmp.forEach(e => e.style.display = 'block');
item += step;
let animation = document.querySelector('.block');
animation.classList.add('fade');
if(tmp.length < 6){
this.remove();
}
});
.block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 80%;
margin: auto;
}
.item {
background-color: #6ab7eb;
border: 1px solid black;
flex: 0 1 25%;
width: 50px;
height: 50px;
}
#load {
background-color: white;
}
.block.fade {
-webkit-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
opacity: 0.5;
}
<div class="block">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<button id="load">Load more</button>
here is a snippet it may help you:
$(document).ready(function () {
size_li = $(".block .item").size();
x=0;
$('.block li:lt('+x+')').addClass('show');
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+6 : size_li;
$('.block .item:lt('+x+')').addClass('show');
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').removeClass('show');
});
});
.block{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 80%;
margin: auto;
}
.item{
background-color: #6ab7eb;
border: 1px solid black;
flex: 0 1 25%;
width: 50px;
height: 50px;
opacity: 0;
transition: all 0.4s ease;
overflow: hidden;
}
.block .item{
height: 0;
opacity: 0;
transition: all 0.4s ease;
overflow: hidden;
}
.block .item.show {
height: 18px;
opacity: 1;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}
#showLess {
color:red;
cursor:pointer;
}
#showLess:hover {
color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="loadMore">Load more</div>
Related
There are 9 circles that scroll horizontally, left to right. It is necessary that each circle when approaching the right side of the screen increased in size by 150% (see screenshot), also when scrolling should be animated rotation of each circle in a clockwise direction. Please advise how this can be implemented using JS/CSS.
enter image description here
.wrapper {
display: flex;
overflow-x: auto;
gap: 10px;
transform: rotateY(-180deg);
}
.wrapper .item {
min-width: 350px;
min-height: 350px;
border-radius: 50%;
text-align: center;
border: 1px dashed black;
transform: rotateY(180deg);
}
<div class="section1">
<h1>Companies we keep</h1>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Considering an element ".sticky-element" (orange) that is inside an absolute positioned container ".tab" (green, blue, fuchsia).
I wish to make it "sticky", so when the the parent ".container" (grey) scrolls, the ".sticky-element" stays always on the top.
I've tried without success getting the offset position of the sticky elements and control the "top" accordingly with the scroll position of the container. Is there any pure CSS solution? If not, how to accomplish this with JS?
Here it is a Codepen with the HTML/CSS of the concept.
Not 100% if I got what you're looking for, but the orange headers stick to the top when scrolling. I had to move them outside of the containers you had them in so they would display like your photo and added a min-width and height to your sticky class. And finally, set a z-index value on the sticky element.
body {
padding: 0;
margin: 0;
}
.wrap {
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
}
.container {
width: 200px;
overflow-y: scroll;
display: flex;
flex-direction: column;
row-gap: 50px;
scroll-snap-type: y mandatory;
}
.group {
display: flex;
position: relative;
}
.tab {
width: 20px;
height: 100%;
background: red;
opacity: 0.9;
position: absolute;
overflow: hidden;
transition: 0.5s width;
}
.tab:hover {
width: 100%;
}
.sticky-element {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
left: 20px;
top: 20px;
background: orange;
position: sticky;
z-index:1;
}
.child-handler {
display: flex;
flex: 1 1 auto;
flex-direction: column;
row-gap: 20px;
}
.child {
height: 200px;
scroll-snap-align: start;
}
.group[groupid="1"] .child {
background: green;
}
.group[groupid="2"] .child {
background: blue;
}
<body>
<div class="wrap">
<div class="container">
<div class="sticky-element">Sticky 1</div>
<div class="group" groupid="1">
<div class="tab">
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="sticky-element">More Sticky</div>
<div class="group" groupid="2">
<div class="tab">
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
</div>
</body>
Based on the solution of #Phaelax z I solve the problem with this approach:
$.each($(".group"), function() {
$(this).css("min-height", $(this).find(".child-handler").innerHeight());
});
function animate(el, width) {
el.stop().animate({
width: width
}, {
duration: 500,
step: function(currentWidth) {
const sticky = el.closest(".group").children(".sticky-element");
const left = parseInt(sticky.css("left"));
sticky.css("width", currentWidth - left);
}
});
}
$(".tab")
.mouseenter(function() {
animate($(this), "100%");
})
.mouseleave(function() {
animate($(this), 20);
});
body {
padding: 0;
margin: 0;
}
.wrap {
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
}
.container {
width: 200px;
overflow-y: scroll;
display: flex;
flex-direction: column;
row-gap: 50px;
scroll-snap-type: y mandatory;
}
.group {
display: flex;
position: relative;
}
.sticky-element {
max-width: 50px;
height: 50px;
width: 0;
left: 20px;
top: 20px;
margin-top: 20px;
margin-bottom: 20px;
background: orange;
position: sticky;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
.tab-child-wrap {
position: absolute;
width: 100%;
height: 100%;
}
.tab {
width: 20px;
height: 100%;
background: red;
opacity: 0.9;
position: absolute;
overflow: hidden;
z-index: 1;
}
.tab-content {
width: 100%;
}
.child-handler {
display: flex;
flex: 1 1 auto;
flex-direction: column;
row-gap: 20px;
}
.child {
height: 200px;
scroll-snap-align: start;
}
.group[groupid="1"] .child {
background: green;
}
.group[groupid="2"] .child {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="wrap">
<div class="container">
<div class="group" groupid="1">
<div class="sticky-element">Sticky 1</div>
<div class="tab-child-wrap">
<div class="tab">
<div class=".tab-content">Content</div>
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
<div class="group" groupid="2">
<div class="sticky-element">More Sticky</div>
<div class="tab-child-wrap">
<div class="tab">
<div class=".tab-content">Content</div>
</div>
<div class="child-handler">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
</div>
</div>
</body>
I want to set width and height for cover element same as scrollWidth and scrollHeight of container element. So during the scrolling it will fully cover container. At the moment it uses width and height of container element cropped by scroll.
The whole area should be covered by green color. Is it possible to do using only css?
.container {
width: 400px;
height: 500px;
border: solid 2px;
position: relative;
overflow: auto;
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
opacity: 0.5;
}
<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="cover"></div>
</div>
I don't know your the final goal is, but have you tried simply applying the background to the container?
.container {
width: 400px;
height: 500px;
border: solid 2px;
overflow: auto;
background-color: rgba(0,128,0,.5);
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}
<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
You can use JavaScript to get the scrollWidth and scrollHeight of the parent.
const container = document.querySelector('.container');
const cover = document.querySelector('.cover');
cover.style.height = container.scrollHeight + "px";
cover.style.width = container.scrollWidth + "px";
.container {
width: 400px;
height: 500px;
border: solid 2px;
position: relative;
overflow: auto;
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}
.cover {
position: absolute;
top: 0;
left: 0;
background-color: green;
opacity: 0.5;
}
<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="cover"></div>
</div>
Here's a Javascript code to do it.
Quick reminder: document.querySelector(".cover") here return just the first element met but if there are more use document.querySelectorAll()
EDIT : You can do it with only CSS too by wrapping the rows in the cover (It's why i put Javascript in comments)
/*const { scrollWidth, scrollHeight } = document.querySelector(".container");
const coverElement = document.querySelector(".cover");
coverElement.style.width = `${scrollWidth}px`;
coverElement.style.height = `${scrollHeight}px`; */
.container {
width: 400px;
height: 500px;
border: solid 2px;
position: relative;
overflow: auto;
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}
.cover {
position: absolute;
top: 0;
left: 0;
background-color: green;
opacity: 0.5;
}
<div class="container">
<div class="cover">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
try this
.container {
width: 400px;
height: 500px;
border: solid 2px;
position: relative;
overflow: auto;
}
.cover {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: green;
opacity: 0.5;
}
.row {
width: 500px;
height: 60px;
border: solid 4px blue;
margin: 10px;
}
<div class="container cover">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
So I'd like to align multiple divs next to each other (horizontal centered). If there are more then n divs the container where the divs are located should be scrollable in x-direction like a simple scrollbar to get something like this:
Note: Would somebody be so kind to add the (!) before the images?
However - I could not get it working so far using this code:
#container {
position: relative;
width: 80%;
height: 40%;
overflow-x: scroll;
background: gray;
}
.item {
position: absolute;
width: 10%;
height: 80%;
background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
margin: auto;
top: 0;
bottom: 0;
background-size: contain;
}
#bigContainer {
position: absolute;
width: 100%;
height: 50%;
background: white;
bottom: 0%;
border-radius: 15px 15px 0px 0px
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Note: It seems like Stackoverflow currently is broke for me so there is the fiddle for testing the code: https://jsfiddle.net/nfdgyx73/13/
Note: It would be cool to provide a solution where I don't have to apply massive changes to the containers (especially not to change their position attributes)
Any help would be very appreciated, thanks a million in advance!
Are you looking for something like this? I also updated fiddle:
https://jsfiddle.net/nfdgyx73/40/
Just need to display the items inline (display: inline-block), and make sure you aren't wrapping your container since it is using a % to calculate width (white-space: nowrap), along with ensuring no overflow for container on y axis (overflow-y: hidden)
Per your comment, I have also added text-align: center to container id, so if there is less items that don't require scroll, they will center.
#container {
position: relative;
width: 80%;
height: 40%;
overflow-x: scroll;
background: gray;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
}
.item {
display: inline-block;
width: 10%;
height: 80%;
background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
margin: 4px;
top: 0;
bottom: 0;
background-size: contain;
}
#bigContainer {
position: absolute;
width: 100%;
height: 50%;
background: white;
bottom: 0%;
border-radius: 15px 15px 0px 0px
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
My solution uses flex box to align all the items as desired. If the there are more items than there is space for it adds a scrollbar (uncomment the extra divs to see it in action)
https://jsfiddle.net/nfdgyx73/58/
#container {
position: relative;
width: 80%;
height: 40%;
overflow-x: scroll;
background: gray;
display: inline-flex;
flex-direction: row;
align-items: center;
}
#container::before, #container::after {
content: '';
margin: auto;
}
.item {
width: 10%;
height: 80%;
background: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
margin: 0 5px;
flex-shrink: 0;
}
#bigContainer {
position: absolute;
width: 100%;
height: 50%;
background: white;
bottom: 0%;
border-radius: 15px 15px 0px 0px
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- <div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div> -->
</div>
</div>
If position: absolute; isn't necessary, this could be done with flexboxes
#container {
display: flex;
justify-content: center;
width: -webkit-fit-available;
padding: 20px;
background: gray;
}
#container .item {
margin-right: 10px;
}
#container .item:last-child {
margin-right: 0;
}
.item {
width: 25px;
height: 25px;
background-image: url("http://www.icemeltmanufacturers.com/wp-content/uploads/2016/09/head-icon-png-5.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
#bigContainer {
display: flex;
width: 80%;
background: white;
overflow-x: auto;
border-radius: 15px 15px 0px 0px;
margin-bottom: 20px; /* This is just to help differentiate the two bigContainers */
}
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div id="bigContainer">
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
I need to center divs and hide them on each click, the problem is when I use hide() and flexbox it makes a rude effect after dissapear, but if you just simply float elements to left it makes fine, how can I achieve this?
I need to apply exactly the same disappearing effect that is in the
first example to the second one (with flexbox).
Here is the example:
$(".example1, .example2").click(function(){
$(this).hide("slow")
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>
Use flex-start for justify content instead of center. Now it has the same effect as with float. You can also use fadeOut instead of hide to achieve effect you want.
$(".example1, .example2").click(function(){
$(this).fadeOut("slow")
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
display: flex;
justify-content: flex-start;
text-align: center;
margin-left: 8px;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>
First, you can notice that this issue doesn't happen when you try to remove an item from the last row (excluding the first one in the last row). The issue appears when the first element of the row n suddenly go to the row n-1 because of 2 things :
You are trying to remove this first element so its width is going to 0 then for sure he will be able to fit into the previous row.
You are trying to remove any element so its width is going to 0 and you are creating enough space for the first element of next row to jump on it.
And this is simply due to center alignment as there is no difference if you do it with float, inline-block or flex. What is happening is that during the transition all the elements are moving to the center and when the new element comes (the first one of the next row) all the elements are re-placed again to keep the center alignement and then you have the rude effect !
With left alignment all the elements will move to the left during the transition and they won't move again at the end of transition (when the new element comes) so we don't have any rude effect.
Here is a snippet that shows inline-block and flex working fine with left alignment :
$(".example2, .example1").click(function() {
$(this).hide("slow");
});
.main {
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1 {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
text-align: center;
display:inline-block;
margin: 8px;
transition:margin 0.6s;
}
.example2 {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
text-align: center;
float:left;
display:inline-block;
margin: 8px;
transition:margin 0.6s;
}
.first {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
}
.second {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
inline-block
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div class="example1">14</div>
<div class="example1">15</div>
<div class="example1">16</div>
<div class="example1">17</div>
<div class="example1">18</div>
<div class="example1">19</div>
</div>
flex solution
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
<div class="example2">15</div>
<div class="example2">16</div>
<div class="example2">17</div>
<div class="example2">18</div>
<div class="example2">19</div>
</div>
</div>
Unfortunately, I don't have a solution to this if you want to only use the hide() of jQuery. Maybe some ideas of solution is to make a more complex code that will avoid the centered elements to move in two directions (you may for example change margin property at the same time to cancel the movement) or you can keep the left alignment and find some trick to simulate the centering (dynamically add some margin when window resize for example).
Hope this will help you to investigate more (even if I didn't really give a solution).
Well as pointed out already it would require some kind of "physics engine" moving the other blocks up smoothly etc.
But I made an attempt anyway which looks a bit more smooth at least.
$(".example1, .example2").click(function(){
var time = 600;
var $parent = $(this).parent();
$parent.animate({'width': '90%'}, time/2, function() {
$parent.animate({'width': '100%'}, time/2);
});
$(this).hide(time);
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
}
.second{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>
You can achieve the above without flex by making the children div's as inline-block with the parent being set with text-align:center, please take a look at this.
$(".example1, .example2").click(function(){
$(this).fadeOut("slow");
});
.main{
border: 2px dotted black;
height: 100%;
width: 100%;
}
.example1{
display: inline-block;
background-color: steelblue;
color: #FFF;
cursor: pointer;
margin: 10px;
padding: 15px 20px;
}
.first{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="main">
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
</div>
</div>
My idea is: fade the whole parent container during reordering.
The effect will not so rude.
$(".second div").click(function() {
$(this).hide("slow");
var p = $(this).parent();
p.addClass("hidden");
setTimeout(function() {
p.removeClass("hidden")
}, 300);
});
p {
clear: both;
}
.second {
display: flex;
flex-wrap: wrap;
justify-content: center;
border: 2px solid black;
transition: 200ms;
}
.second div {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
}
.hidden {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="second">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>
Instead of justify-content: center I changed it to justify-content: space-evenly (in your case, looks somewhat similar to center only) also updated the function from simply hiding to .animate and then .hide. Will it do?
$(".example1, .example2").click(function(){
var _this = this;
$(_this).animate({width: "0"}, 500, function(){ $(_this).hide(500) })
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
overflow: hidden;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-evenly;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>