jQuery日记(2)--jQuery效果
时间 2020-08-13
标签
jquery
日记
效果
- 显示/隐藏
$("#btn1").click(function(){
$("p").hide(speed, callback) ; // .show(1800, fresh())
})
$("p").toggle(speed, callback);
- 淡入/淡出
$(".class").mouseover( function(){ //淡入
$("p").fadeIn( slow, callback);
});
$(".class").dbclick( function(){
$("p").fadetoggle( slow, callback); //切换淡入淡出
})
$(".class").hide( function(){
$("p").fadeto(slow, 0.5, callback) //控制透明度 0-1之间,最好选用这个!
})
- 下滑/上滑
div.panle{
display: none;
height: 150px;
}
$("#btn"). click(function(){
$(".panle"). slidedown( slow, callback) // .slideup() .slidetoggle()
})
- 动画(如需对位置进行改变,则应该将position属性改成relative, fixed, absolute) div.animation{ position: relative; } $document. ready(function(){ $("button"). click(function(){ $("div.animation"). animate({ left:'+=200px'; //相对于当前位置左移 200px opacity:' 0.5 '; //透明度为50% height: ' toggle' ; // 预约义的toggle 每点击一次上滑/下滑 }) }) })