擴大與jQuery和CSS

我無法實現這一效果對點擊的div：https://www.beoplay.com/products/beoplayh9#usp 擴大與jQuery和CSS

我希望能夠以這種方式擴大和密切的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>

我不知道我是否採取正確的方法來此。請幫忙！

來源

2017-04-09 vladanm

我想通過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>

來源

2017-04-09 18:42:58 Neil

這正是我一直在尋找！謝謝！ – vladanm

擴大與jQuery和CSS

回答

相關問題