我正在尝试让信息标签从圆形图片后面滑出。为了做到这一点，我使用了一个 block 和一个圆圈来创建信息字段并将其粘贴在图像后面。
我遇到的问题是让它顺利滑出。因为有两个 div，所以正方形滑出，然后是圆，导致它看起来不连贯。
我想让它像一个对象一样进出切换。
$(document).ready(function(){
$('.employeeBlock').hide();
$('.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot').toggle('slide');
$('.employeeBlock').toggle('slide');
});
我已经在员工 div 中的 employeeBlock 中尝试了 employeeDot 以及 employeeDot 和 employeeBlock 分开并在 employee div 中。
两种方法给出的结果相似
谢谢
编辑:感谢您的回复，它运行更流畅，但还不够完美。我想我需要创建一个形状像子弹的元素，然后切换它。关于如何做到这一点有什么想法吗？
我能得到的最接近的是药丸形状，它留下了一些未被覆盖的区域
编辑:这是我的 html:
<body>
<div class = 'employee'>
<div class = 'employeeDot'></div>
<div class = 'employeeBlock'></div>
<img class = 'pic' src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>
</div>
</body>
</html>
还有我的 CSS:
.pic { height: 150px; width: 150px; border-radius: 75px; position: absolute; }
>.employeeBlock {
background-color:maroon;
height: 150px;
width: 150px;
position: absolute;
left: 75px;
float: left;
>.employeeDot {
background-color: maroon;
height: 150px;
width: 250px;
border-radius: 150px;
position: absolute;
float: left;
left: 75px;
最佳答案
关于javascript - 用一个动画切换两个字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25023170/