jquery - DIV 或 jQuery 用幻灯片/显示显示？

Question

我正在尝试完成一个项目以显示图像，以便其他两个图像像翅膀一样出现？这个例子是这样的：

我试过用 DIV 和一些 jQuery 来做，但我只能让一个以错误的方式显示或显示，比如上下或从角落滑入，而不是从中间滑入。

任何人都知道一个简单的方法来做到这一点？

jsfiddle.net/fTJPu/17/embedded/result

Answer 1

您可以使用 JQuery UI slide() 函数。

jQuery UI 幻灯片演示

在基本图像下方的 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);
});

元素是绝对定位的，但它们位于相对定位的容器中，因此您可以将整个“小部件”移动到您喜欢的任何地方。

Answer 2

当所有其他方法都失败时，您通常可以使用 .animate() 强制执行您想要的行为。

我可能会设置两个不同的动画调用，每个机翼上一个。我将每个机翼的初始宽度设置为小于基础图像的宽度，将基础图像的 z-index 设置为高于机翼，然后执行以下操作：

$('#image2').animate({
    'width': image2Width,
    'left': (leftEdgeOfBaseImage - image2Width)
}, delay);

$('#image3').animate({
    'width': image3Width,
    'left': rightEdgeOfBaseImage
}, delay);