zoukankan      html  css  js  c++  java
  • 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>
     
  • 相关阅读:
    js设置、修改、获取、删除 cookie
    mysql排序让空值NULL排在数字后边
    javascript的函数作用域及声明提前
    修改mysql的密码
    解决thinkphp设置session周期无效的问题
    filter_var() 验证邮箱、ip、url的格式 php
    将中文字符串分割为数组 解决str_split中文乱码php
    生成多个不重复的随机数字php
    javascript控制input只允许输入数字
    推荐开发工具系列之--Clover(文件浏览器)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9244853.html
Copyright © 2011-2022 走看看