JQuery学习笔记（二）

最新推荐文章于 2024-01-20 21:49:50 发布

一只懒猫不爱睡觉

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量191

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/xyh123chh/article/details/76254863

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、滑动

$(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>
		
	
			
		
   
   
    
    你好