JQuery 使用animate让DIV变化或左右移动

JQuery，利用 animate 让DIV变化或左右移动

<!-- @auther:[e-mail] -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
////////////////////////////////////////////////
o = {};
o.speed = 1000;
o.long = function() {
    $(".back").animate({ width:$(window).width() }, o.speed, o.short );
}
o.short = function() {
    $(".back").animate({ width:"100px" }, o.speed, o.long );
}

	
o.left = function() {
	$(".back1").animate({ left:"0px" }, o.speed, o.right );
}
o.right = function() {
	$(".back1").animate({left:$(window).width()-100 }, o.speed, o.left);
}
/////////////////////////////////////
$(document).ready(function() {
	o.long();
	o.right();
	$("#input\\.name").val("[e-mail]");
	//$("div").html("[e-mail]").html();
	var leftFlag = 0;
	$("#right").click(function(){if($(window).width()-leftFlag>=300) {
			leftFlag+=300;$(".block").animate({left: '+=300'}, "slow");}});

	$("#left").click(function(){if(leftFlag>=300) {leftFlag-=300; 
			$(".block").animate({left: '-=300'}, "slow");}});
});
</script>
<style>
body{margin:0 0 0 0;}
.back{ width:100px; background:red; }
.back1{ position:absolute; background:red; }
.block{ position:absolute; background:red; }
</style>
<input id="input.name" type="text" value="test" />
<div class='back'>宽度自动变化</div><br />
<button id="left">««左移««</button>
<button id="right">»»右移»»</button>><br />
<div class="block">手动左右移</div>
<div id="abc" style="border:dotted 2px black;"> </div>
<div class='back1'>自动左右移</div>

评论

2 楼 CHENYINGDAN 2014-09-03  

有用

1 楼 popo001 2014-05-06  

好，不错，正用得上啊。机耕支持一下。