一、滑动
$(selector).slideDown(speed,callback); //下滑
$(selector).slideUp(speed,callback);//上滑
$(selector).slideToggle(speed,callback);用于上滑,下滑
二、animate()动画
$(selector).animate({params},speed,callback);
params行程动画的css属性,必须值。speed:可选值,"slow"、"fast" 或毫秒。callback:可选值,动画完成后执行函数。
PS:HTML 元素都有一个静态位置,且无法移动,如需对位置进行操作,首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
animate()可以操作所有CSS属性,但是必须使用Camel标记法书写所有的属性名。例如使用paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right等等
三、stop()停止
$(selector).stop(stopAll,goToEnd);使用与滑动、淡入淡出和自定义动画。
stopAll:可选,默认false,即仅停止活动的动画,允许任何排入队列的动画向后执行.
goToEnd:可选,默认false,规定是否立即完成当前动画。
<script src="../js/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function(){
$('.but1').click(function(){
$('.panel').animate({
left:'200px',
opacity:'0.3',
width:'300px',
height:'200px',
fontSize:'3em'
},6000);
$('.panel').animate({
left:'10px',
opacity:'0.9',
width:'200px',
height:'100px',
fontSize:'1em'
},6000);
});
$('.but2').click(function(){
//停止当前队列活动动画,但是允许已排队其他动画执行。
$('.panel').stop();
});
$('.but3').click(function(){
//停止当前队列活动的动画,并清空动元素上的其他队列所有动画。
$('.panel').stop(true);
});
$('.but4').click(function(){
停止当前队列活动的动画,并清空动元素上的其他队列所有动画,但会立即完成当前活动动画,并停下来。
$('.panel').stop(true,true);
});
});
</script>
你好