• 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();

    });

  • 相关阅读:
    Android自定义之仿360Root大师水纹效果
    Android之TextView的Span样式源码剖析
    Android之TextView的样式类Span的使用详解
    随着ScrollView的滑动,渐渐的执行动画View
    仿微信主界面导航栏图标字体颜色的变化
    android自定义之 5.0 风格progressBar
    Android性能优化之内存篇
    Android性能优化之运算篇
    How to install Zabbix5.0 LTS version with Yum on the CentOS 7.8 system?
    How to install Zabbix4.0 LTS version with Yum on the Oracle Linux 7.3 system?
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13488631.html
Copyright © 2020-2023  润新知