zoukankan      html  css  js  c++  java
  • 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();

    });

  • 相关阅读:
    A1023 Have Fun with Numbers (20分)(大整数四则运算)
    A1096 Consecutive Factors (20分)(质数分解)
    A1078 Hashing (25分)(哈希表、平方探测法)
    A1015 Reversible Primes (20分)(素数判断,进制转换)
    A1081 Rational Sum (20分)
    A1088 Rational Arithmetic (20分)
    A1049 Counting Ones (30分)
    A1008 Elevator (20分)
    A1059 Prime Factors (25分)
    A1155 Heap Paths (30分)
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13488631.html
Copyright © 2011-2022 走看看