<p style="display: none">Hello</p> <input id="btn1" type="button" value="切换"/>
$("#btn1").click(function(){
$("p").toggle("show");
})
<div></div> <input id="btn1" type="button" value="展开"/> <input id="btn2" type="button" value="收缩"/> <input id="btn3" type="button" value="切换"/>
$("#btn1").click(function(){
$("div").slideDown();
});
给id为btn1的按钮绑定click事件,当点击展开按钮的时候,div向下展开。
$("#btn2").click(function(){
$("div").slideUp();
});
给id为btn2的按钮绑定click事件,当点击展开按钮的时候,div向上收缩。
$("#btn3").click(function(){
$("div").slideToggle();
});
<div></div> <input id="btn1" type="button" value="淡入"/> <input id="btn2" type="button" value="淡出"/> <input id="btn3" type="button" value="切换"/> <input id="btn4" type="button" value="设置透明度"/>
$("input").first().click(function(){
$("div").fadeIn(1000);
});
$("input").eq(1).click(function(){
$("div").stop().fadeOut(1000);
//$("div").fadeOut(1000);
});
$("input").eq(2).click(function(){
$("div").stop().fadeToggle(1000);
})
$("input").eq(3).click(function(){
$("div").stop().fadeTo(1000,0.5);
})
div{
width:100px;
height:100px;
background:red;
}
<div>ST宋泽</div> <input id="btn1" type="button" value="显示效果"/> <input id="btn2" type="button" value="停止动画"/>
$("#btn1").click(function(){
$("div").delay(2000).animate({
"width":"300px",
"height":"300px",
"font-size":"4em"
},5000,function(){
console.log("动画完成")
})
});
$("#btn2").click(function(){
$("div").stop();
})
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有