jquery - 如何使用 html、css 和 jquery 使弹出部分平滑滚动

Question

我在一个网站上工作，我必须制作一个从左到右滚动部分的功能，反之亦然。这是屏幕截图。

现在我要做的是，如果我单击蓝色部分中显示的加号图标，那么它的部分应该会轻微滚动并从左向右平滑地延伸，如下图所示。

如果我单击粉红色部分中的加号图标，那么它应该从右向左移动，这意味着该功能应该相反。如下图所示。

我想知道使用 html、css 和 jQuery 设计此功能的最佳方式是什么

Answer 1

还有一个使用 jquery animate 的例子，希望对你有帮助:

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>