jQuery切换div的平滑方式

Question

我做了一个简单的登陆页，你有四个div每个占25%的屏幕宽度。当点击一个时，所有其他的变得更小，点击的那个就会膨胀。虽然它不光滑，但工作很好。

接下来，当关闭所有面板时，它们应该回到25%的宽度。

因为javascript不是我喜欢的茶，所以我想对此提出一些建议。

我猜代码效率不高，所以如果有人想出了更好的解决方案，那就好了。

说得够多了，下面是与当前工作状态相关的代码：https://codepen.io/MaartenTe/pen/JKYzMx

​

$("#one").click(function() {
  $(".content-1").animate({
    width: 'toggle'
  }, 500);
  $(".content-2").hide(500);
  $(".content-3").hide(500);
  $(".content-4").hide(500);
  $("#one").animate({
    width: '5%'
  });
  $("#two").animate({
    width: '5%'
  });
  $("#three").animate({
    width: '5%'
  });
  $("#four").animate({
    width: '5%'
  });
})

$("#two").click(function() {
  $(".content-2").animate({
    width: 'toggle'
  }, 500);
  $(".content-1").hide(350);
  $(".content-3").hide(350);
  $(".content-4").hide(350);
})

$("#three").click(function() {
  $(".content-3").animate({
    width: 'toggle'
  }, 500);
  $(".content-1").hide(350);
  $(".content-2").hide(350);
  $(".content-4").hide(350);
})

$("#four").click(function() {
  $(".content-4").animate({
    width: 'toggle'
  }, 500);
  $(".content-1").hide(350);
  $(".content-3").hide(350);
  $(".content-2").hide(350);
})

body {
  padding: 0;
  margin: 0;
  background-color: #000;
}
.container-fluid {
  display: flex;
  height: 650px;
}
.container-fluid div {
  width: 25%;
  text-align: center;
  height: 100%;
  min-height: 100%;
  color: white;
}
div[class^="content-"] {
  width: 100%;
  color: black;
  background-color: orange;
}
.content-1,
.content-2,
.content-3,
.content-4 {
  display: none;
}
#one {
  background-color: black;
}
#two {
  background-color: blue;
}
#three {
  background-color: red;
}
#four {
  background-color: green;
}
.content-1 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.content-2 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider2-copy.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.content-3 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider-3.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.content-4 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="one" class="toggle">
    1

  </div>
  <div class="content-1 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
  <div id="two" class="toggle">
    2
  </div>
  <div class="content-2 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
  <div id="three" class="toggle">
    3
  </div>
  <div class="content-3 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
  <div id="four" class="toggle">
    4
  </div>
  <div class="content-4 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
</div>

​

Answer 1

响应星展评论，在这里利用CSS transition属性更有意义。我不确定jQuery本身是否支持类似于slideDown()的东西来缩小元素的宽度。最好的方法是使用jQuery在指定的元素上切换这个CSS属性，这在这里是过分的。

我做了一个JSFiddle，你可以看看这里。本质上，当用户单击一个“内容切换器”时，它通过将其宽度设置为5%来缩小所有的切换器，使用.next()查找单击的切换器的下一个兄弟，并将其宽度设置为80%。

内容及其内容切换器都利用了CSS转换属性，这是文档化的这里。

Answer 2

编辑css:更改宽度

div[class^="content-"] {
  width: 0%;
  color: black;
  background-color: orange;
}

删除

.content-1,
.content-2,
.content-3,
.content-4 {
  display: none;
}

并对代码进行了一些更改，使其变得更简单小提琴。