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)
    })
  • 相关阅读:
    慕课网 -- 性能优化之PHP优化总结笔记
    安装memcached服务 和 php 安装memcache扩展
    配置 host only 后 nat不能上网了
    linux svn soeasy
    wamp ssl配置https
    wamp 配置多站点访问
    安装wamp 缺少msvcr100.dll
    vagrant 相关记录
    复制mysql数据库的步骤
    php 的两个扩展 memcache 和 memcachd
  • 原文地址:https://www.cnblogs.com/haonantong/p/4690539.html
Copyright © 2011-2022 走看看