寻找通过jquery实现特定动画的方法

我有一个页面，其中我有3个div。一个是主div，另2个是主div中的子div位置。一个子div称为left div，另一个子div称为right div。在这里我粘贴图像，这样人们可以看到我要的输出类型

假设我有两个按钮叫做show和hide。当我点击show按钮时，一个div将被动态生成，并以幻灯片的形式出现，就像滑动到右div的左侧一样，覆盖右div，就像我点击hide按钮时一样，动态覆盖div将滑动到右侧，并揭开右div。因此，我在谷歌上搜索了很多次，以获取更多信息类似的事情，但仍然一无所获。如果有人帮我做这件事，那将是很大的帮助

谢谢

编辑 感谢@Jamie Barker。他提供了接近我要求的示例代码。我在这里粘贴他的代码

<div id="main">
    <div id="left">

    </div>
    <div id="right">

    </div>
</div>
<span id="animate">Click me to Animate</span>

#main {
    width:400px;
    padding:5px;
    box-sizing:border-box;
    border:1px solid #000;
    position:relative;
    height:200px;
    float:left;
    clear:left;
}
#main > div {
    width:calc(50% - 10px);
    border:1px solid #000;
    position:absolute;
    box-sizing:border-box;
    height:calc(100% - 10px);
}
#main #left {
    left:5px;   
    background:red;
    opacity:0.5;    
}
#main #right {
     right:5px;   
    background:yellow;
    opacity:0.5;    
}
#animate {
    margin:10px 0 0 0;
    float:left;
    clear:left;
    background:#666;
    cursor:pointer;
    color:#fff;
    padding:2px 5px;
    border:1px solid #000;
}

$('#animate').click(function() {
    if ($('#left').css('left')==='5px') {  
        $('#left').css({'z-index':'1000'});
        $('#left').animate({
            left: $('#right').offset().left - 10
        }, 500, function() {
            console.log('moved right');    
        });
    } else {
        $('#left').animate({
            left: '5'
        }, 500, function() {
            console.log('moved left');    
        });        
    }
});

jsiddle链接如下

如果有人运行代码，他/她将看到左侧div向右滑动并覆盖右侧div，但这不是我的要求。我想一个div将在右侧动态生成，并向左侧滑动，以覆盖右侧div。如何修改上述代码实现相同的效果

---

谢谢

如果您正在使用JQuery，您可以使用JQuery UI为动画功能添加更多轻松效果，该功能应该满足您的需要：

---

您尝试过的代码？您可以使用js切换div上的类，这些类具有与之相关联的转换。如果需要进一步帮助，请显示您当前的代码。主要问题是我可以生成html，也知道如何动态生成div，但主要问题是如何定位覆盖div，以及如何从右向左拖动div以覆盖具有类似覆盖效果的右div。请参阅我的编辑。谢谢如果你拥有你在评论中所说的知识，你应该能够自己解决剩下的问题。这是一个问答网站，不是一个请为我写一些代码的网站。主要的问题是我可以生成html，也知道如何动态生成div，但主要的问题是如何定位覆盖div，以及如何从右向左拖动div来覆盖右div，类似覆盖效果。你可以使用绝对CSS定位吗？看这个…你为什么用这个清楚：左；在css中…我只是省略了这个，但一切都很好。请你解释一下这个清晰的：左；的意义；。谢谢