html code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animate demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../move.js"></script>
<style>
#m1{position: absolute;background-color: red;height:59px;width:200px;margin-top:200px;left:50px;opacity: 0;}
#m2{position: absolute;background-color: red;height:59px;width:200px;margin-top:200px;left:50px;opacity: 0;}
#m3{position: absolute;background-color: red;height:59px;width:200px;margin-top:200px;left:50px;opacity: 0;}
</style>
</head>
<body>
<div id="m1">1</div>
<div id="m2">2</div>
<div id="m3">3</div>
<button id="left">«</button>
<script>
$( document ).ready(function() {
});
var f1 = [];
var a1 = ['#m1','#m2','#m3'];
var i = 0;
$( "#left" ).click(function(){
for( i=0;i<f1.length;i++)
{
f1[i].move2(62);
}
var obj = new fimove(a1[i]);
obj.move(59);
//obj.fadeout(59);
f1.push(obj);
i+=1;
console.log(a1[i]);
});
</script>
</body>
</html>
move.js code
var fimove = function(o){
"use strict";
this.oo = o;
}
fimove.prototype.move = function(m) {
"use strict";
var oo = this.oo;
$(this.oo).animate({
"margin-top": "-="+m+"px" ,
"opacity":"1",
"duration": 1000,
});
setTimeout(function(){ fomove(oo,m) }, 2000);
};
fimove.prototype.move2 = function(m) {
"use strict";
$(this.oo).animate({
"margin-top": "-="+m+"px" ,
"duration": 1000,
});
};
function fomove(o,m){
$(o).delay( 2500 ).animate({
"margin-top": "-="+m+"px" ,
"opacity":"0",
"duration": 1000,
})
}
沒有留言:
張貼留言