1、jQuery隐藏显示:可以使用hide()和show()方法来隐藏和显示HTML元素。
1、show()显示
2、hide()隐藏 不占位置 本质是在行内样式表中添加了display:none样式
3、toogle() 切换显示隐藏
4、(1)$("#hide").click(function(){
$("p").hide();
});
(2)$("#show").click(function(){
$("p").show();
});
(3)$("#toogle").click(function(){
$("p").toogle();
});
2、jQuery淡入淡出:参数可以控制淡入淡出的时间
1、fadeIn()用于淡入已隐藏的元素
2、fadeOut()用于淡出可见元素 不占位置 本质是在行内样式表中添加了display:none样式
3、fadeToggle()可以在fadeIn()与fadeOut()方法之间进行切换
4、(1)$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeOut(3000);
});
(2)$("button").click(function(){
("#div2").fadeToggle("fast");
});
3、jQuery滑动:
1、slideDown()方法用于向下滑动元素
2、slideUp()方法用于向上滑动元素
3、slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换
4、(1)$("#flip").click(function(){
$("#div1").slideDown();
$("#div1").slideUp();
});
(2)$("#flip").click(function(){
$("#panel").slideToggle();
})
4、jQuery自定义动画:无法实现颜色的变化(背景色、字体色)
1、animate()方法用于创建自定义动画 参数是对象
2、animate()方法有四个参数 (selector).animate({styles},speed,easing,callback)
(1)styles:必需。规定产生动画效果的一个或多个 CSS 属性/值。
(2)speed:可选,规定动画的速度。可能值:毫秒值、“slow”、“fast”
(3)easing:可选,规定在动画的不同点中元素的速度,默认值是 "swing"。可能值:“swing”、“linear”
(4)callback:可选,animate 函数执行完之后,要执行的函数。
3、$("button").click(function(){
$("div").animate({
left:'250px',opacity:'0.5',height:'150px','150px'
});
});
5、stop方法
1、stop()方法用于停止动画或效果,在它们完成之前,适用于所有jQuery效果函数,包括滑动、淡入淡出和自定义动画。
2、$("#stop").click(function(){
$("#panel").stop();
});