[英]Switching div places using css transition or javascript
可以說我想制作一個桌面小工具,並在其中放置一些快捷方式。 我想知道CSS過渡對Windows側邊欄小工具是否起作用,和/或我是否應該使用一些Webkit前綴。 我知道這個動畫對於像我這樣的初學者可能有點過分誇張,但是當我單擊中間的大盒子時,我希望這些盒子順時針順時針順暢地切換位置,就像這張圖片http://oi61.tinypic.com/ amp211.jpg
如果使用CSS轉換無法完成此操作,請您指出一些使用javascript / jquery的方法。
<div class="menu_cont">
<div class="menu_def" id="menu_up3"></div>
<div class="menu_def" id="menu_up2"></div>
<div class="menu_def" id="menu_up1"></div>
<div class="menu_def" id="menu_down3"></div>
<div class="menu_def" id="menu_down2"></div>
<div class="menu_def" id="menu_down1"></div>
<div class="menu_def" id="menu_center"></div>
</div>
CSS
.menu_cont
{width:104px; height:312px; margin:10px 10px 0 0; position:relative;}
.menu_def
{position:absolute;
border:2px solid #000; border-radius:5px; box-shadow:5px 0 5px #000;}
#menu_up3
{width:40px; height:40px; top:0; right:0; background-color:#0C0;}
#menu_up2
{width:50px; height:50px; top:30px; right:10px; background-color:#066;}
#menu_up1
{width:60px; height:60px; top:70px; right:20px; background-color:#036;}
#menu_down3
{width:40px; height:40px; bottom:0; right:0; background-color:#9C3;}
#menu_down2
{width:50px; height:50px; bottom:30px; right:10px; background-color:#0FF;}
#menu_down1
{width:60px; height:60px; bottom:70px; right:20px; background-color:#09F;}
#menu_center
{width:70px; height:70px; top:119px; left:0; background-color:#03F;}
我認為您想要的是:
http://jsfiddle.net/6ta0ye3y/3/ jQuery示例:
$("#menu_center").click(function() {
$(this).delay(400).animate({
top: "+=60px",
left: "+=20px",
height: "-=10px",
width: "-=10px"
});
$("#menu_down1").delay(300).animate(
{top: "+=50px",
left: "+=20px",
height: "-=10px",
width: "-=10px"
});
$("#menu_down2").delay(200).animate({
top: "+=40px",
left: "+=20px",
height: "-=12px",
width: "-=12px"
});
$("#menu_down3").delay(100).animate({
top: "-=200px",
left: "+=20px"
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.