Question

我无法实现此效果：https://www.beoplay.com/products/beoplayh9#usp

我希望能够以这种方式扩展和关闭div。我只是在悬停时扩展它们，但它们不会保持扩展。这是演示：

https://jsbin.com/dihayufegi/edit?css,js,output

$(document).ready(function(){
    $("div").click(function(){
        $(".frame").animate({width: "+=500px"});
    });
});

* {margin:0;padding:0;border:0 none;}
*,*:before,*:after {box-sizing:border-box;}
html {color: rgba(255,255,255,.75);}
section {
display: flex;
background-image: linear-gradient(to bottom, cadetblue,silver);
width: 100%;
height: 100vh;
overflow: hidden;
}
div {
flex: 1;
transition: 1s ease-in-out;
border: 1px solid rgba(160,160,255, .5);
}
div:hover {
flex: 25;
}
div:first-child {
  background: rgba(0,0,0,.4);
}
div:nth-child(2) {
  background: rgba(0,0,0,.2);
}
div:nth-child(3) {
  background: rgba(0,0,0,0);
}
div:nth-child(4) {
  background: rgba(255,255,255,.2);
}
div:nth-child(5) {
  background: rgba(255,255,255,.4);
}

/* @media (max-width:500px) {
  section {flex-direction: column;}
} */

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="slider">
    <div class="frame" id="first">  
      
    </div>
    <div class="frame">  
      
    </div>
    <div class="frame">
             
    </div>
    <div class="frame">  
              
    </div>
    <div class="frame">  
              
    </div>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</html>

我不确定我是否采取了正确的方法。请帮助！

Answer 1

我会添加一个名为active的类，并通过jQuery添加它，而不是使用hover：

$(document).ready(function(){
    $("div").click(function(){
      $(this)
        .addClass("expand",500)
        .siblings()
        .removeClass("expand",500);
    });
});

* {margin:0;padding:0;border:0 none;}
*,*:before,*:after {box-sizing:border-box;}
html {color: rgba(255,255,255,.75);}
section {
display: flex;
background-image: linear-gradient(to bottom, cadetblue,silver);
width: 100%;
height: 100vh;
overflow: hidden;
}
div {
flex: 1;
transition: 1s ease-in-out;
border: 1px solid rgba(160,160,255, .5);
}
.expand {
flex: 25;
}
div:first-child {
  background: rgba(0,0,0,.4);
}
div:nth-child(2) {
  background: rgba(0,0,0,.2);
}
div:nth-child(3) {
  background: rgba(0,0,0,0);
}
div:nth-child(4) {
  background: rgba(255,255,255,.2);
}
div:nth-child(5) {
  background: rgba(255,255,255,.4);
}

/* @media (max-width:500px) {
  section {flex-direction: column;}
} */

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="slider">
    <div class="frame" id="first">  
      
    </div>
    <div class="frame">  
      
    </div>
    <div class="frame">
             
    </div>
    <div class="frame">  
              
    </div>
    <div class="frame">  
              
    </div>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</html>

点击jquery和css

1 个答案: