这是一个(主要是)CSS解决方案: http: //tinker.io/7d393/6
HTML:
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
#box.move{
-webkit-animation: myanim 5s;
animation: myanim 5s;
}
@-webkit-keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
@keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
JS:
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box').toggleClass('move')});
});
这是一个主要是 jQuery 的解决方案: http: //tinker.io/7d393/7
HTML:
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
JS:
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box')
.css({left:0,top:0,width:'100px',height:'100px'})
.animate({left:'800px',top:0,width:'100px',height:'100px'},3000)
.animate({left:'800px',top:0,width:'200px',height:'200px'},20)
.animate({left:0,top:0,width:'200px',height:'200px'},1500);
});
});