如何使popout節滾動使用html，css和jquery

Question

順利滾動我正在一個網站上，我必須做一個從左到右，反之亦然滾動的功能。這是屏幕截圖。

現在我要做的是，如果我在藍色部分顯示加號圖標，然後點擊它的部分應該稍微滾動，由左到右，你可以在接下來的圖像看到連續延伸。

，如果我在粉紅色部分的加號圖標點擊，那麼它應該從右到左移動表示功能應該工作，反之亦然。因爲它顯示在下一張圖片中。

我想知道什麼是使用HTML，CSS和jQuery來設計這個功能的最好辦法

Answer 1

試試這個

$('button').click(function(){ 
 
\t $(this).parent().css({'width':'60%'}); 
 
\t $(this).parent().siblings().css({'width':'40%'}); 
 
})

.container{ 
 
    width:100%; 
 
    height:100px; 
 
    position:relative; 
 
} 
 
.container div{ 
 
    transition:0.5s; 
 
} 
 
.container .div1{ 
 
    width:50%; 
 
    height:100px; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    background:blue; 
 
} 
 
.container .div2{ 
 
    width:50%; 
 
    height:100px; 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="div1"> 
 
<button>Click</button> 
 
</div> 
 
<div class="div2"> 
 
<button>Click</button> 
 
</div> 
 
</div>

Answer 2

有一個其他例子使用jquery動畫我希望它可以幫助：

width=$('#ppp').width(); 
 
$('.sec button').click(function(){ 
 
$(this) 
 
.parents('.sec').animate({width:width*0.15-20}) 
 
.siblings('.sec').animate({width:width*0.85-20}); 
 

 
$('.sp').toggleClass('flip'); 
 
});

.sec{ 
 
    width:calc(50% - 20px); 
 
    display:inline-block; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    height:90px; 
 
} 
 

 
.sec button{ 
 
margin-top:30px; 
 
vertical-align:middle; 
 
} 
 

 
.sp{ 
 
transition:0.5s all; 
 
display:inline-block; 
 
vertical-align:middle; 
 
margin:0; 
 
width:0px; 
 
} 
 

 
.sp-r{ 
 
border-top: 90px solid red; 
 
border-right: 20px solid transparent; 
 
margin-right:-10px; 
 
} 
 

 
.sp-r.flip{ 
 
border-top:0 transparent; 
 
border-bottom: 90px solid red; 
 
} 
 

 
.sp-l{ 
 
border-bottom: 90px solid green; 
 
border-left: 20px solid transparent; 
 
margin-left:-10px; 
 
} 
 

 
.sp-l.flip{ 
 
border-bottom:0 transparent; 
 
border-top: 90px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ppp"> 
 
<div class="sec" style="background:red;"> 
 

 
<button>+</button> 
 
</div><!-- 
 
--><DIV CLASS="sp sp-r"></DIV><!-- 
 
--><DIV CLASS="sp sp-l"></DIV><!-- 
 
--><div class="sec" style="background:green;"> 
 
    <button>X</button> 
 
</div> 
 
</div>