效果
1)显示、切换、隐藏:
<script>$(function(){var div = $("#d"); ??$("#b1").click(function(){ ?????div.hide(); ????}); /*隐藏*/ ??$("#b2").click(function(){ ?????div.show(); ??}); /*显示*/ ??$("#b3").click(function(){ ?????div.toggle(); ??}); /*切换,若当前为隐藏则改为显示,若当前为显示则改为隐藏*/ ??$("#b4").click(function(){ ?????div.show(1000); ??}); /*延迟1000ms显示*/ ??$("#b5").click(function(){ ?????div.hide(1000); ??}); /*延迟1000ms隐藏*/ ??$("#b6").click(function(){ ?????div.toggle(1000); ??}); /*延迟1000ms切换*/ ?}); ??</script>
2)向上滑动、向下滑动、滑动切换、滑动隐藏
<script>$(function(){var div = $("#d"); ??$("#b1").click(function(){ ?????div.slideUp(); ??}); ?/*向上滑动*/ ??$("#b2").click(function(){ ?????div.slideDown(); ??}); /*向下滑动*/ ??$("#b3").click(function(){ ?????div.slideToggle(); ??}); ?/*滑动切换*/ ??$("#b4").click(function(){ ?????div.slideUp(2000); ??}); /*延迟向上滑动*/ ??$("#b5").click(function(){ ?????div.slideDown(2000); ??}); ?/*延迟向下滑动*/ ??$("#b6").click(function(){ ?????div.slideToggle(2000); ??}); ?/*延迟滑动切换*/ ??}); ???</script>
3)淡入淡出:
JQuery2
原文地址:https://www.cnblogs.com/zhuqiwei-blog/p/10398591.html