jQuery (二) 效果学习

原創

2020-02-26 00:29

在jQuery中有许多可视的效果，而且非常的方便，下面总结一下常见的效果

1. jQuery的隐藏和显示

jQuery hide() 隐藏对应的html标签

$("#test").click(function(){
	$("p").hide();
});

jQuery show() 显示对应的html标签

$("#test").click(function(){
	$("p").show();
});

jQuery toggle() 切换hide()和show()

$("#test").click(function(){
	$("p").toggle();
});

2. jQuery的淡入和淡出

jQuery fadeIn(); 淡入

$(selector).fadeIn(speed,callback);

speed 可选“slow”、“fast”和毫秒

jQuery fadeOut(); 淡出

$(selector).fadeOut(speed,callback);

jQuery fadeToggle(); 淡入和淡出切换

$(selector).fadeToggle(speed,callback);

jQuery fadeTo(): 可以给定不透明度

$(selector).fadeTo(speed,opacity,callback);

3. jQuery滑动

jQuery slideDown() 下滑

$(selector).slideDown(speed,callback);

jQuery slideUp() 上滑

$(selector).slideUp(speed,callback);

jQuery slideToggle() 下滑和上滑切换

$(selector).slideToggle(speed,callback);

4.jQuery动画

jQuery animate() 方法创建自定义动画

$(selector).animate({params},speed,callback); 其中params参数是必须输入的自定义动画的css属性

注意：对位置进行操作时，首先必须把CSS的position属性设置为relative、fixed、absolute

例子：

$("#test").click(function(){
	$("div").animate({
		left:'120px',
		opacity:'0.5'
		height:'100px',
		width:'100px'
	});
})

5. stop()

jQuery stop() 可以停止滑动和动画

$(selector).stop(stopAll,goToEnd); 参数stopAll是否清除当前动画队列，goToEnd参数规定是否立即完成当前动画，两个参数默认都是false

例子：

$("#stop").click(function(){
	$("#test").stop();
});

6. Callback

jQuery Callback函数

当效果动画100%完成后，即可调用Callback函数，上面交的隐藏、显示、淡入、淡出、滑动、动画都可以用这个函数

例子：

$("#test").hide(3000,function(){
alert("test the callback");
})

7. Chaining

jQuery Chaining 允许一条语句执行多个jQuery方法

例子

$("#test").slideUp(2000).slideDown(2000).fadeIn(2000).fadeOut(2000);

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.