• jQuery动画


    show()和hide()—隐藏显示

     //show()和hide() hide()首先记住display的值,在将display设置为None
            $(function () {
                $("#panel h5.head").toggle(function () {
                    $(this).next("div.content").hide(600);
                }, function () {
                    $(this).next("div.content").show(600);
                });
            });
    View Code

    fadeOut()和fadeIn()—通过不透明度隐藏或显示

      //fadeOut() 降低元素的不透明度
            //fadeIn() 与fadeOut()相反
            $(function () {
                $("#panel h5.head").mousemove(function () {
                    $(this).next("div.content").fadeOut();
                }).mouseout(function () {
                    $(this).next("div.content").fadeIn();
                });
            })
    View Code

    slideDown()和slideUp()—改变元素高度,向下延深,向上收缩

     //slideDown() 改变元素高度 元素由上至下延伸显示
            //slideUp() 由下到上收缩
            $(function () {
                $("#panel h5.head").toggle(function () {
                    $(this).next("div.content").slideUp();
                }, function () {
                    $(this).next("div.content").slideDown();
                });
            });
    View Code

    animate()自定义动画

     $(function () {
                $("#panel1").css("opacity", "0.5"); //设置不透明度
                $("#panel1").click(function () {
                    $(this).animate({ left: "500px" }, 3000);  //以3秒的速度移动
                    $(this).animate({ left: "+=500px" }, 3000);  //以3秒的速度累加移动
                    $(this).animate({ left: "-=500px" }, 3000);  //以3秒的速度累减移动
    
                    //多种效果动画,改变样式映射
                    $(this).animate({ left: "500px", height: "200px" }, 3000); //向右下方移动同步移动
    
                    //多种效果可以有序的执行
                    $(this).animate({ left: "500px" }, 3000);
                    $(this).animate({ height: "200px" }, 3000);
                    //可改为链式:
                                    $(this).animate({ left: "500px" }, 3000)
                                        .animate({ height: "200px" }, 2000);
    
                    //综合动画
                    $(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)
                        .animate({ top: "200px",  "200px" }, 3000, function () {
                            $(this).css("border", "5px solid blue");
                        })
                        .fadeOut("slow");
                    })
                })
    View Code

    stop()停止当前动画,执行下一个动画

     //stop()停止当前动画,执行下一个动画
                //stop(clearQueue,gotoEnd);clearQueue:清除当前执行的队列,gotoEnd:调至执行的动画结尾,两个参数均为Bool型,均可选
                $(function(){
                    $("#panel").hover(function(){
                        $(this).stop()
                            .animate({height:"300px"},3000) //如果此时触发光标移除事件,将继续执行下面的代码,若不想执行下边的代码
                                                            //则stop需要参数stop(true);
                            .animate({width:"200px"},2000);
                    },function(){
                        $(this).stop()
                            .animate({height:"100"},2000);
                    })
    
                })
    View Code

    判断元素是否正在动画状态,若在,不在添加新的动画状态,避免动画积累

     //判断元素是否正在动画状态,若在,不在添加新的动画状态,避免动画积累
                if(!$("#panel").is(":animate")){  //判断是否处在动画状态上
                }
    View Code

    其他动画函数

       //其他动画
                toggle(speed,[callback]); //切换元素的可见状态
                slideToggle(speed,[callback]); //通过高度变化切换可见性
                fadeTo(speed,opacity,[callback]); //把元素的不透明度以渐变的方式调整到指定的值
    View Code
  • 相关阅读:
    深入MySQL(一):MySQL的组织架构
    使用graalvm nativeimage 快速暴露jar 代码为native 共享库
    SQL注入__布尔盲注和时间盲注 菜鸟
    linux网络配置,无法解析或者打开软件包列表
    django入门视图
    三.面试题
    select,poll,epoll的区别以及使用方法
    Linux从入门到入坑
    品味Spring Cache设计之美
    JAVA_基础篇(1)_JDK 8 的下载、安装与配置
  • 原文地址:https://www.cnblogs.com/zxd543/p/3556071.html
Copyright © 2020-2023  润新知