jQuery 隐藏和显示
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
实例
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
$(selector).hide(speed,callback)$(selector).show(speed,callback)
$("button").click(function(){ $("p").hide(1000); });
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
$(".flip").click(function(){ $(".panel").slideDown(); });
$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
jQuery 自定义动画
jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
<script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); </script>
函数 | 描述 |
---|---|
$(selector).hide() | 隐藏被选元素 |
$(selector).show() | 显示被选元素 |
$(selector).toggle() | 切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() | 向下滑动(显示)被选元素 |
$(selector).slideUp() | 向上滑动(隐藏)被选元素 |
$(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() | 淡入被选元素 |
$(selector).fadeOut() | 淡出被选元素 |
$(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
$(selector).animate() | 对被选元素执行自定义动画 |