您的位置：首页 > Web前端 > JQuery

jQuery学习（四）jQuery效果

2012-08-13 18:14 148 查看

四．JQuery效果

jQuery可以创建隐藏、显示、切换、滑动以及自定义动画等效果。

4.1.jQuery效果函数

方法

描述

animate()

对被选元素应用“自定义”的动画

clearQueue()

对被选元素移除所有排队的函数（仍未运行的）

delay()

对被选元素的所有排队函数（仍未运行）设置延迟

dequeue()

运行被选元素的下一个排队函数

fadeIn()

逐渐改变被选元素的不透明度，从隐藏到可见

fadeOut()

逐渐改变被选元素的不透明度，从可见到隐藏

fadeTo()

把被选元素逐渐改变至给定的不透明度

hide()

隐藏被选的元素

queue()

显示被选元素的排队函数

show()

显示被选的元素

slideDown()

通过调整高度来滑动显示被选元素

slideToggle()

对被选元素进行滑动隐藏和滑动显示的切换

slideUp()

通过调整高度来滑动隐藏被选元素

stop()

停止在被选元素上运行动画

toggle()

对被选元素进行隐藏和显示的切换

（注：jQuery效果函数摘自www.3school.com.cn）

4.2常用实例

jQuery效果

函数

描述

$(selector).hide()

隐藏被选元素

$(selector).show()

显示被选元素

$(selector).toggle()

切换（在隐藏与显示之间）被选元素

$(selector).slideDown()

向下滑动（显示）被选元素

$(selector).slideUp()

向上滑动（隐藏）被选元素

$(selector).slideToggle()

对被选元素切换向上滑动和向下滑动

$(selector).fadeIn()

淡入被选元素

$(selector).fadeOut()

淡出被选元素

$(selector).fadeTo()

把被选元素淡出为给定的不透明度

$(selector).animate()

对被选元素执行自定义动画

4.2.1通过hide()和show()两个函数，jQuery支持对
HTML元素的隐藏和显示

实例：

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

});

</script>

</head>

<body>

<pid="p1">如果点击“隐藏”按钮，我就会消失。</p>

<buttonid="hide"type="button">隐藏</button>

<buttonid="show"type="button">显示</button>

</body>

</html>

hide()和show()都可以设置两个可选参数：speed和callback。

语法：

$(selector).hide(speed,callback)


$(selector).show(speed,callback)


speed参数规定显示或隐藏的速度。可以设置这些值："slow","fast","normal"或毫秒。

callback参数是在hide或show函数完成之后被执行的函数名称。
实例：

<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<buttontype="button">隐藏</button>
<p>Thisisaparagraphwithlittlecontent.</p>
<p>Thisisanothersmallparagraph.</p>
</body>
</html>

4.2.2自定义动画

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="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>

</head>

<body>

<p><ahref="#"id="start">StartAnimation</a></p>

<divid="box"

style="background:#98bf21;height:100px;width:100px;position:relative">

</div>

</body>

</html>

（注：以上内容是通过http://www.w3school.com.cn学习，很多内容粘帖下来是为了方便学习）


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航