DIV或jQuery显示幻灯片/透露？

Question

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

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

任何人都知道一种简单的方法吗？

jsfiddle.net/fTJPu/17/embedded/result

Answer 1

您可以使用JQuery UI slide（）函数。

JQuery UI Slide demo

在基本图像下方的css中放置具有较低z-index的翅膀并隐藏。

使用滑动功能切换并滑出机翼。 API会让您向左或向右滑动时间延迟。

你所得到的东西很好。

更新：这是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);