微信扫一扫打赏支持

jquery-12 jquery常用动画效果有哪些

jquery-12 jquery常用动画效果有哪些

一、总结

一句话总结：jquery可以用户animate()自定义动画，也可以slide和fade系列方法来设置动画。

 

1、动画效果如何设置执行时间？

在方法里面带上时间参数即可，所有的都是这样

25         $(this).next().fadeOut(1000);
 5         $(this).next().slideUp(1000);

 

2、滑上滑下的一组效果怎么写（三个常用方法）？

关键词为slide，slideDown(); slideUp();slideToggle();

 2 $('h1').click(function(){
 3     d=$(this).next().css('display');
 4     if(d=='block'){
 5         $(this).next().slideUp(1000);
 6     }else{
 7         $(this).next().slideDown(1000);
 8     }
 9 });

 

3、如何根据css属性来判断元素的操作？

用css()拿出属性值，然后判断，比如判断显隐就可以用下面方法

22     d=$(this).next().css('display');
23 
24     if(d=='block'){

 

4、淡入淡出动画的一组操作有哪些（三个方法）？

fadeIn();
fadeOut();
fadeTo();

21 $('h1').click(function(){
22     d=$(this).next().css('display');
23 
24     if(d=='block'){
25         $(this).next().fadeOut(1000);
26     }else{
27         $(this).next().fadeIn(1000);
28     }
29 });

 

 

二、jquery常用动画效果有哪些

1、相关知识

1.基本
show(time);
hide(time);
toggle(time);

2.滑动
slideDown();
slideUp();
slideToggle();

3.淡入淡出
fadeIn();
fadeOut();
fadeTo();

 

2、代码

fadeIn和fadeOut淡入淡出

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>linux</h1>    
15     <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
16 
17     <h1>linux</h1>    
18     <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
19 </body>
20 <script>
21 $('h1').click(function(){
22     d=$(this).next().css('display');
23 
24     if(d=='block'){
25         $(this).next().fadeOut(1000);
26     }else{
27         $(this).next().fadeIn(1000);
28     }
29 });
30 </script>
31 </html>

fadeTo改变透明度

 1 <script>
 2 $('h1').click(function(){
 3     d=$(this).next().css('opacity');
 4 
 5     if(d=='1'){
 6         $(this).next().fadeTo(1000,0.5);
 7     }else{
 8         $(this).next().fadeTo(1000,1);
 9     }
10 });
11 </script>

slideToggle切换滑上滑下

1 <script>
2 $('h1').click(function(){
3     $(this).next().slideToggle();
4 });
5 </script>

slideDown滑下slideUp滑上

 1 <script>
 2 $('h1').click(function(){
 3     d=$(this).next().css('display');
 4     if(d=='block'){
 5         $(this).next().slideUp(1000);
 6     }else{
 7         $(this).next().slideDown(1000);
 8     }
 9 });
10 </script>

 

 

 

 

 

 

 

 

 

 
posted @ 2018-06-29 18:20  范仁义  阅读(715)  评论(0)  编辑  收藏  举报