首页>web前端>jquery视频教程

jquery常用动画效果 有哪些1、2、3、4.。。。。。

2018-11-24 08:28:00 | 查看次数 115 | 分类: web前端>jquery视频教程 文章来源:来源:http://www.ifx666.cn

摘要内容:jquery常用动画效果 有哪些1、2、3、4.。。。。。

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>

上一篇: jquery专区视频基础教程

下一篇: 锋利的jQuery读者可以系统地掌握jQuery的选择器、DOM操作等操作细节

验证码:
评论列表
  • 文章推荐

    09-19 | 查看次数 786

    《深入理解Spring Cloud与微服务构建》PDF下载

    09-14 | 查看次数 197

    bootstrap tooltip 提示框的样式、提示字体颜...

    09-01 | 查看次数 199

    json字符串与java对象互转,json字符串转化为map...

    08-04 | 查看次数 382

    java面试题及答案---2018核心Java面试问题与解答...

    08-03 | 查看次数 898

    java面试题及答案---2018核心Java面试问题与解答...

    最新评论
    文章标题:管理和发布文章java cms

    评论内容:能下载吗

    评论时间:2018-12-12 01:30:02

  • 返回顶部
    欢迎投稿
    返回底部