DIV或jQuery显示幻灯片/揭示？

Question

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

我试图与资料核实和一些jQuery的这样做，但我只能得到一个揭示或以错误的方式显示，像上下或从角落里滑动，不从中间。

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

jsfiddle.net/fTJPu/17/embedded/result

Answer 1

您可以使用jQuery UI滑动（）函数。

JQuery UI Slide demo

有具有较低的z-index在CSS基本图像和隐藏下方的翅膀。

用滑动功能切换并滑出机翼。该API可让您随着时间的推移向左或向右滑动。

一个jsFiddle你会得到很好。

更新：这里是jsFiddle。我没有像你那样使用表格，而是使用div。我认为它看起来有点干净。基本上，翅膀开始隐藏，并且切换（）将显示它。我使用了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索引，然后做这样的事情：

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

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