は私が困っこの効果を達成することを持っていますjQueryとCSS

とクリックでdivを展開します。私はホバリングでそれらを拡張する限り、しかし、彼らは拡大したままではありません。は私が困っこの効果を達成することを持っていますjQueryとCSS

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>

私はこれに適切なアプローチを取っているかどうかわからない：ここではデモです。 Plsヘルプ！

出典

2017-04-09 vladanm

私の代わりにhoverを使用するのでは、jQueryを介して、それをアクティブと呼ばれるクラスを追加し、追加したい：

$(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

答えて

関連する問題