Javascript 使用一个动画切换两个字段_Javascript_Jquery_Html_Css

Javascript 使用一个动画切换两个字段

javascript jquery html css

Javascript 使用一个动画切换两个字段,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正试着从一张圆形图片后面滑出一个信息标签。为了做到这一点，我使用了块和圆来创建信息字段，并将其粘贴在图像后面我遇到的问题是如何让它顺利滑出。由于有两个div，正方形滑出，然后是圆形，使其看起来起伏不平我想让它像是一个对象一样进行切换 $(document).ready(function(){ $('.employeeBlock').hide(); $('.employeeDot').hide(); $('.employee').click(function(){

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

我遇到的问题是如何让它顺利滑出。由于有两个div，正方形滑出，然后是圆形，使其看起来起伏不平

我想让它像是一个对象一样进行切换

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

我在employeeBlock中的employeeDot中尝试过它，employeeBlock位于employee div中以及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>

}

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

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

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

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

试试这个

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

试试这个

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

.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'});
        });
    });

.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'});
        });
    });

其余答案涵盖了所有内容，但要使元素形状像子弹，请使用：
border-radius: 10px 10px 0 0;

但是要根据你的喜好搭配尺码和侧面
 其余答案涵盖了所有内容，但要使元素的形状像子弹一样，请使用：
border-radius: 10px 10px 0 0;

但是要根据你的喜好搭配尺码和侧面
 谢谢，但这使得正方形和圆形同时开始滑动，但在过渡期间两者之间仍然有一个空间。你想在其中一个完成时另一个开始吗？我希望它作为一个大项目切换。我试图澄清我在编辑中寻找的是什么。不完全是。我需要最后一个项目是一个子弹形状，这样当它位于原始圆形图片后面时，它形成一个大的药丸形状，但这使得正方形和圆形同时开始滑动，但在过渡期间，两者之间仍然有一个空间。你想在其中一个完成时另一个开始吗？我希望它作为一个大项目切换。我试图澄清我在编辑中寻找的是什么。不完全是。我需要最后一个项目是一个子弹形状，这样当它位于原始圆形图片后面时，它会形成一个大的药丸形状SlideToggle使它从顶部进入默认值，有办法调整吗？另外，.toggle（'slided'）工作正常，问题是我使用了两个不同的项目，它有点颠簸。你想让它从侧面滑动吗？我已经更新了我的答案，如果你能提供html，那会很有帮助。animate（）工作得很好，谢谢。我假设{width:'toggle'}部分使其在0宽度和全宽度之间切换。这是正确的吗？我不太确定，因为我个人从未使用过它，但我相信它会切换到元素的宽度或容器的宽度。slideToggle使它从顶部进入默认值，是否有方法调整它？另外，.toggle（'slided'）工作正常，问题是我使用了两个不同的项目，它有点颠簸。你想让它从侧面滑动吗？我已经更新了我的答案，如果你能提供html，那会很有帮助。animate（）工作得很好，谢谢。我假设{width:'toggle'}部分使其在0宽度和全宽度之间切换。这是正确的吗？我不太确定，因为我个人从未使用过它，但我相信它会切换到元素的宽度或容器的宽度。