juqery 点击显示点击隐藏，slideDown slideUp slideToggle
Posted on 2015-06-20 22:43 小蕊同学 阅读(801) 评论(0) 编辑 收藏 举报
<!doctype html><html><head><meta charset="utf-8"><title>webrx-title</title><script src="js/jquery-1.11.2.min.js"></script><style>#ad{width:200px;height:300px;background-color:green;}</style></head><body><input type="button" value="slideDown" onClick="$('#ad').slideDown('fast')" ><input type="button" value="slideUp" onClick="$('#ad').slideUp('fast')"><input type="button" value="slideToggle" onClick="$('#ad').slideToggle('fast')"><div id="ad"></div></body></html>
注意引入的jquery一定要正确
slideToggle 点击关闭再点展开
slideUp 点击合上
slideDown 点击展开
mybtn 的控制点击显示点击隐藏
<!doctype html><html><head><meta charset="utf-8"><title>webrx-title</title><script src="js/jquery-1.11.2.min.js"></script><style>#ad{width:200px;height:300px;background-color:green;}</style><script>$(document).ready(function(e) {$('input[value=mybtn]').click(function(){var o=$('#ad');o.is(':hidden') ? o.slideDown('fast') : o.slideUp('slow');});});</script></head><body><input type="button" value="mybtn"><div id="ad"></div></body></html>
fadein fadeout 控制显示隐藏
<!doctype html><html><head><meta charset="utf-8"><title>webrx-title</title><script src="js/jquery-1.11.2.min.js"></script><style>#ad{width:200px;height:300px;background-color:green;}</style><script>$(document).ready(function(e) {$('input[value=mybtn]').click(function(){var o=$('#ad');//(o.is(':hidden') ? o.slideDown('slow') : o.slideUp('slow') )(o.is(':hidden') ? o.fadeIn('slow') : o.fadeOut('slow') )});});</script></head><body><input type="button" value="fadeIn" onClick="$('#ad').fadeIn('fast')" ><input type="button" value="fadeOut" onClick="$('#ad').fadeOut('fast')"><input type="button" value="fadeTo" onClick="$('#ad').fadeToggle('fast')"><input type="button" value="mybtn"><div id="ad"></div></body></html>
注意slideUp和fadeIn
显示和隐藏的效果不同
