zoukankan      html  css  js  c++  java
  • jQuery基本动画效果

    jQuery基本动画效果

    1、show()

    用于显示页面元素与之相对应的hide() 测试案例:

    <p title="标题">测试</p>
    <ul style="display: none">
        <li title='苹果'>苹果</li>
        <li title='橘子'>橘子</li>
        <li title='菠萝'>菠萝</li>
    </ul>
    点击显示
    $('p').bind("click",function(){
        $("ul").show();
    })
    
    点击切换效果
    $('p').toggle(function(){
        $("ul").show();
    },function(){
        $("ul").hide()
    })
    
    注意:这里可以加参数进去

    speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

    注意这里toggle()的使用
    $('#test').click(function(){
        $("ul").toggle();
    })
    ————————————————
    slideDown
    $('p').toggle(function(){
        $("ul").slideUp()
    },function(){
        $("ul").slideDown();
    })
    
    这里注意this关键字,昨天我们测试过不能用,因为this属于js的东西,但是能不能转为jQuery的东西呢

    演示代码:

    $('#test').toggle(function(){
        $(this).next().slideUp() ----注意这里和上边的写法不同之处
    },function(){
        $(this).next().slideDown();
    })
    
    注意的和之前的隐藏显示一样,这里也有简化版
    $('#test').click(function(){
        $("ul").slideToggle()
    })
    ——————————————
    fadeIn    fadeOut---淡入淡出效果
    $('#test').toggle(function(){
        $(this).next().fadeOut();
    },function(){
        $(this).next().fadeIn();
    })
    
    注意:看API这里也有它自己的简洁写法,使用过程中多多注意

    animate()

    ——觉得之前的动画效果不满意,好吧,我们看这里,自定义动画效果

    自定义移动的案例:

    <div id="test"></div>
       #test{
                position: absolute;
                 100px;
                height: 100px;
                border: 1px solid red;
                background-color: gray;
            }
    $('#test').click(function(){
        $(this).animate({left:"500px"},3000)
    })
    
    注意:这里可以添加多个条件的
    $('#test').click(function(){
        $(this).animate({left:"200px",height:"200px"},3000)
    })
    

    案例2:

    <button id="left">?</button> <button id="right">?</button>
    <div id="test"></div>
    
    $('#left').click(function(){
        $("#test").animate({left:"-500px"},3000)
    })
    $('#right').click(function(){
        $("#test").animate({left:"500px"},3000)
    })
  • 相关阅读:
    C语言指针
    Windows环境下 PHP+Apache+Mysql配置
    游戏贴图中常用术语《DC》的理解
    C# winform程序如何打包64位安装程序
    C# winform中的datagridview控件标头加入checkbox,实现全选功能。
    C# WinForm控件之Dock顺序调整
    关于struts2.0 中 struts.xml设置了struts.devMode 的值为TRUE后仍然不起作用的分析
    Java Web项目 配置 ueditor心得
    关于VS中文件属性的解释
    使用Ueditor的心得。
  • 原文地址:https://www.cnblogs.com/haonantong/p/4690539.html
Copyright © 2011-2022 走看看