Question

我正在尝试从圆形图片后面滑出信息标签。为了做到这一点，我使用了一个块和圆来创建信息字段并将其粘贴在图像后面。

我遇到的问题是让它顺利滑出。由于有两个div，因此方形滑出然后是圆形，使其看起来不稳定。

我想让它切换进出，好像它是一个对象。

$(document).ready(function(){
    $('.employeeBlock').hide();
    $('.employeeDot').hide();
    $('.employee').click(function(){
        $('.employeeDot').toggle('slide');
        $('.employeeBlock').toggle('slide');
});

我已经在雇员div中的employeeBlock内的employeeDot中尝试过它以及employeeDot和employeeBlock分离以及员工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 { 身高：150px; 宽度：150px; border-radius：75px; 位置：绝对; }

>.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;

}

Answer 1

您可以指定任意数量的选择器组合成一个结果：

$('.employeeDot, .employeeBlock').toggle('slide');

Multiple Selector

Answer 2

.toggle();已弃用，请改用.slideToggle();。

向下滑动：

$(document).ready(function(){
    $('.employeeDot','.employeeBlock').hide();
    $('.employee').on("click", function(){
        $('.employeeDot, .employeeBlock').slideToggle('fast');
    });
});

从侧面滑动：

$(document).ready(function(){
        $('.employeeDot','.employeeBlock').hide();
        $('.employee').on("click", function(){
            $('.employeeDot, .employeeBlock').animate({width: 'toggle'});
        });
    });

Answer 3

其余的答案涵盖了所有内容，但要使元素像子弹一样使用：

border-radius: 10px 10px 0 0;

但是要根据你的喜好来匹配大小和侧面。

Answer 4

试试这个。

$(document).ready(function(){
$('.employeeBlock,.employeeDot').hide();
$('.employee').click(function(){
    $('.employeeDot, .employeeBlock').toggle('slide');});

用一个动画切换两个字段

4 个答案: