javascript - 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

呼应DBS' comment ，在这里利用 CSS transition 属性更有意义。我不确定 jQuery 是否原生支持类似于 slideDown() 的东西来缩小元素的宽度。您可以做的最好的事情是使用 jQuery 在指定元素上切换此 CSS 属性，这在这里就有点矫枉过正了。

我做了一个 JSFiddle，你可以看看 here .本质上，当用户单击“content-toggler”时，它会通过将宽度设置为 5% 来缩小所有切换器，使用 .next() 找到被单击切换器的下一个同级，并将其宽度设置为 80%。

内容及其内容切换器都利用了记录在案的 CSS 过渡属性 here .