我正在尝试完成一个项目以对图像进行显示，以便其他两个图像像翅膀一样出现？这个例子是这样的：
我曾尝试使用 DIV 和一些 jQuery 来实现，但我只能让一个以错误的方式显示或显示，例如上下或从角落滑入，而不是从中间滑入。
有人知道一个简单的方法吗？
jsfiddle.net/fTJPu/17/embedded/result
【问题讨论】：
您可以使用 JQuery UI slide() 函数。
将 css 中 z-index 较低的翅膀隐藏在基本图像下方并隐藏。
使用滑动功能切换和滑出机翼。 API 可以让您在时间延迟的情况下向左或向右滑动。
你所拥有的一个 jsFiddle 会很好。
更新：这是jsFiddle。我没有像你那样使用表格，而是使用 div。我觉得它看起来更干净一些。基本上，翅膀从隐藏开始，toggle() 将显示它。我使用了 UI 滑块。
HTML：
<div class="angelBox">
<div class="angelBody">
<div class="leftWing wing"></div>
<div class="rightWing wing"></div>
</div>
</div>
<br/><br/>
Click on the Blue Box
CSS：
.angelBox{
margin-left:100px;
}
.angelBody{
position:relative;
width:150px;
height:150px;
background-color:blue;
}
.wing{
width:70px;
height:50px;
background-color:grey;
display:none;
}
.leftWing{
position:absolute;
left:-70px;
top:50px;
}
.rightWing{
position:absolute;
right:-70px;
top:50px;
}
Javascript：
$('.angelBody').click(function(){
$('.leftWing').toggle("slide", { direction: "right" }, 500);
$('.rightWing').toggle("slide", { direction: "left" }, 500);
});
元素是绝对定位的，但它们位于相对定位的容器中，因此您可以将整个“小部件”移动到您喜欢的任何位置。
【讨论】：
当所有其他方法都失败时，您通常可以使用 .animate() 强制执行您想要的行为。
我可能会设置两个不同的动画调用，每个机翼上一个。我将每个机翼的初始宽度设置为小于基础图像的宽度，将基础图像的 z-index 设置为高于机翼，然后执行以下操作：
$('#image2').animate({
'width': image2Width,
'left': (leftEdgeOfBaseImage - image2Width)
}, delay);
$('#image3').animate({
'width': image3Width,
'left': rightEdgeOfBaseImage
}, delay);
【讨论】：