從右下角到jQuery的動畫到

我正在使用jQuery和css的UI工作。我正嘗試爲使用jQuery animate的導航構建一個頁面。我現在所擁有的是頁面中的四個圖塊。我能夠增加頂部兩個瓷磚的高度和寬度，以便它佔據整個父div。但是我沒能爲底部的兩個DIV做同樣的事情。
從右下角到jQuery的動畫到

我嘗試了很多東西，但問題是我可以使用浮動左和右浮動的頂部兩個DIV，但我不能做同樣的底部兩個DIV。我不知道如何使用底部的兩個DIV。

所有我想要的是一種動畫，如圖所示，以便Child3和Child4從它們的位置展開，從其位置展開以佔據父DIV的完整高度和寬度。

Animation of Bottom Right Div

Animation of Bottom Left Div

我現在正在做的是我使用

$("child1").animate({"height":someheight,"width":somewidth},500);

我增加和減少的高度和寬度基於股利的現高度以便它具有放大和縮小效果。

我已經附上JS小提琴：http://jsfiddle.net/uxuzfq5x/爲最高的兩個DIVs，我想實現上述最底部的兩個DIVs。

我是jQuery的新手，如果我犯了錯誤，請糾正我。

在此先感謝。

來源

2014-10-09 Amit Nandan Periyapatna

嘗試像這樣使用jQuery animate()方法

function f1() { 
 
    $(".child3").css("z-index", 1000).animate({ 
 
    height: "100%", 
 
    width: "100%" 
 
    }, 1000).animate({ 
 
    width: "49.8%", 
 
    height: "49%" 
 
    }, 1000, function() { 
 
    $(this).css("z-index", 100); 
 
    f2(); 
 
    }); 
 
} 
 

 
function f2() { 
 
    $(".child4").css("z-index", 1000).animate({ 
 
    height: "100%", 
 
    width: "100%" 
 
    }, 1000).animate({ 
 
    width: "49.8%", 
 
    height: "49%" 
 
    }, 1000, function() { 
 
    $(this).css("z-index", 100); 
 
    f1(); 
 
    }); 
 
} 
 
f1();

.parent { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 
.child { 
 
    position: absolute; 
 
    width: 49.8%; 
 
    height: 49%; 
 
    background-color: green; 
 
    font-size: 16px; 
 
} 
 
.child1 { 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.child2 { 
 
    right: 0; 
 
    top: 0; 
 
} 
 
.child3 { 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
.child { 
 
    right: 0; 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child child1">Child1</div> 
 
    <div class="child child2">Child2</div> 
 
    <div class="clear"></div> 
 
    <div class="child child3">Child3</div> 
 
    <div class="child child4">Child4</div> 
 
</div>

來源

2014-10-09 06:37:32

試試這個jsfiddle

$(function(){ 

    $(".child").animate({"height":"100px","width":"200px"},500); 

    });

來源

2014-10-09 06:31:25

從右下角到jQuery的動畫到

回答

相關問題