• jQuery动画效果


    1、jQuery隐藏显示:可以使用hide()和show()方法来隐藏和显示HTML元素。

    1、show()显示

    2、hide()隐藏  不占位置  本质是在行内样式表中添加了display:none样式

    3、toogle() 切换显示隐藏

    4、(1)$("#hide").click(function(){

    $("p").hide();

    });

    (2)$("#show").click(function(){

    $("p").show();

    });

    (3)$("#toogle").click(function(){

    $("p").toogle();

    });

    2、jQuery淡入淡出:参数可以控制淡入淡出的时间

    1、fadeIn()用于淡入已隐藏的元素

    2、fadeOut()用于淡出可见元素  不占位置  本质是在行内样式表中添加了display:none样式

    3、fadeToggle()可以在fadeIn()与fadeOut()方法之间进行切换

    4、(1)$("button").click(function(){

    $("#div1").fadeIn();

    $("#div2").fadeIn("slow");

    $("#div3").fadeOut(3000);

    });

    (2)$("button").click(function(){

    ("#div2").fadeToggle("fast");

    });

    3、jQuery滑动:

    1、slideDown()方法用于向下滑动元素

    2、slideUp()方法用于向上滑动元素

    3、slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换

    4、(1)$("#flip").click(function(){

    $("#div1").slideDown();

    $("#div1").slideUp();

    });

    (2)$("#flip").click(function(){

    $("#panel").slideToggle();

    })

    4、jQuery自定义动画:无法实现颜色的变化(背景色、字体色)

    1、animate()方法用于创建自定义动画 参数是对象

    2、animate()方法有四个参数   (selector).animate({styles},speed,easing,callback)

    (1)styles:必需。规定产生动画效果的一个或多个 CSS 属性/值。

    (2)speed:可选,规定动画的速度。可能值:毫秒值、“slow”、“fast”

    (3)easing:可选,规定在动画的不同点中元素的速度,默认值是 "swing"。可能值:“swing”、“linear”

    (4)callback:可选,animate 函数执行完之后,要执行的函数。

    3、$("button").click(function(){

    $("div").animate({

    left:'250px',opacity:'0.5',height:'150px','150px'

    });

    });

    5、stop方法

    1、stop()方法用于停止动画或效果,在它们完成之前,适用于所有jQuery效果函数,包括滑动、淡入淡出和自定义动画。

    2、$("#stop").click(function(){

    $("#panel").stop();

    });

  • 相关阅读:
    2020暑假项目-车辆派遣管理系统开发记录#8
    2020暑假项目-车辆派遣管理系统开发记录#7
    2020暑假项目-车辆派遣管理系统开发记录#6
    2020暑假项目-车辆派遣管理系统开发记录#5
    2020暑假项目-车辆派遣管理系统开发记录#4
    2020暑假项目-车辆派遣管理系统开发记录#3
    持续交付工具ThoughtWorks Go部署step by step
    mysql千万级大数据SQL查询优化
    分享MYSQL中的各种高可用技术(源自姜承尧大牛)
    我的MYSQL学习心得(十七) 复制
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13488631.html
Copyright © 2020-2023  润新知