Question

jQuery 怎么控制一个动画方向？

我用jQuery的animate函数写了一个自定义动画，其实很简单，就是把一个已经显示的DIV层消失掉，可是我想控制动画的方向是“从上到下”消失，现在jQuery给我做到的恰恰相反，因为我这个效果是一个类似冒泡提示的动画，显示的时候是从下到上浮起来，我想消失是从上到下消失，而animate函数的参数不是只传一个最终动画完成时的样式吗？可我怎么控制动画的方向呢？望高人指点一二，先谢谢啦
这是我那句动画的代码：
$.fn.showDown = function(speed, easing, callback ) {
var props = {top:'+=' + this.height(), height:'hide'};
return this.animate( props, speed, easing, callback );
};

Answer 1

$("XX").animate({left:"",right:"",top:"",bottom:""},speed,fucntion(){});
第一个参数通过设置上下左右的值可以设置动画元素的运动方向，第二个参数可以设置运动的时间，第三个参数设置动画执行结束之后的操作。
第二、三个参数可以缺省。
第二个参数的值可以是fast、slow或者具体的数值（单位毫秒），缺省值的速度是400毫秒。
第三个参数缺省表示不动画结束后不执行任何操作。

Answer 2

引入jquery.js，复制以下代码，即可运行。
<style type="text/css">
.slide {
position: relative;
height: 200;
lightyellow;
}

.slide .inner {
position: absolute;
left: 0;
bottom: 0;
height: 100;
lightblue;
width: 100%
}
</style>

1、slidetoggle() 交替slidedown(),slideup()
Html代码
<div id="slidebottom" class="slide">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$('#slidebottom button').click(function() {
$(this).next().slideToggle();
});

2、左侧横向交替滑动 Animate Left
Html代码
<div id="slidewidth" class="slide">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$("#slidewidth button").click(function(){
$(this).next().animate({width: 'toggle'});
});

3、左侧横向交替滑动 Animate Left Margin （非隐藏）
Html代码
<div id="slideleft" class="slide" style="width: 50%;float: right">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$("#slideleft button").click(function(){
var $lefty = $(this).next();
$lefty.animate({
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0
});
});

4、右侧横向滑动Slide to right
Html代码
<div id="slidemarginleft" class="slide" style="width: 60%;float: left">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$("#slidemarginleft button").click(function(){
var $marginlefty = $(this).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0
});
});

Answer 3

//如果 style="position:absolute; top:0; left:0"
$.fn.showDown = function(speed, easing, callback ) {
var props = { "top": $(this).height(), height:'hide'};
return this.animate( props, speed, easing, callback );
};
//一般情况
$.fn.showDown = function(speed, easing, callback ) {
var props = {"margin-top": $(this).height(), height:'hide'};
return this.animate( props, speed, easing, callback );
};

Answer 4

$("#id").animate({"top":"200px"},{queue:false,duration:1000}).animate({"height":"0px",{queue:false,duration:1000}});

Answer 5

横着