zoukankan      html  css  js  c++  java
  • jQuery——样式与动画

    通过jQuery,不仅能够轻松地为页面操作添加简单的视觉效果,甚至能创建更精致的动画。


    ###修改内联CSS
    jQuery提供了.css()方法。

    这个方法集getter(获取方法)和setter(设置方法)于一身。为取得某个样式属性的值,可以为这个方法传递一个字符串形式的属性名,然后同样得到一个字符串形式的属性值。要取得多个样式属性的值,可以传入属性名的数组,得到的则是属性和值构成的对象。

    对于backgroundColor这样由多个单词构成的属性名,jQuery既可以解释连字符版的CSS表示法(如background-color),也可以解释驼峰大小写形式的DOM表示法(如backgroundColor)。

    //取得单个属性的值
    .css('property')
    //返回"value"
    //取得多个属性的值
    .css(['property1','property-2'])
    //返回{"property1":"value1","property-2":"value2"}
    

    设置样式属性时,.css方法能够接受的参数有两种,一种是为它传递一个单独的样式属性和值,另一种是为它传递一个由属性-值对构成的对象。

    //单个属性及值
    .css('property','value')
    //属性-值对构成的对象
    .css({
        property1:'value1',
        'property-2':'value2'
        })
    

    这些键值的集合叫对象字面量,是在代码中直接创建的Javascript对象。

    对象字面量
    一般来说,数字值不需要加引号而字符串值需要加引号。由于属性名师字符串,所以属性通常是需要加引号的。但是,如果对象字面量中的属性名是有效的javascript标识符,比如使用驼峰大小写形式的DOM表示法时,则可以省略引号。

    使用.css()的方式与使用.addClass()的方式相同——将它连缀到jQuery对象后面,这个jQuery对象包含一组DOM元素。

    ####设置计算的样式属性值

    在需要多次使用某个jQuery对象时,最好也把这个对象保存到一个变量中,从而达到缓存数据的目的。

    ####带厂商前缀的样式属性
    浏览器厂商在引入试验性的样式属性时,通常会在实现达到CSS规范要求之前,在属性名前面添加一个前缀。等到实现和规范都稳定之后,这些属性的前缀就会被去掉,让开发人员使用标准的名称。

    css声明:

    -webkit-property-name:value;
    -moz-property-name:value;
    -ms-property-name:value;
    -o-property-name:value;
    property-name:value;
    

    ###隐藏和显示元素
    基本的.hide()和.show()方法不带任何参数。这两个方法的作用就是立即隐藏或显示匹配的元素集合,不带任何动画效果。

    .hide()方法会将匹配的元素集合的内联属性设置为display:none。但它聪明之处是,能够在把display的值变成none之前,记住原先的display值,通常是block、inline或inline-block。

    .show()方法会将匹配的元素集合的display属性,恢复为应用display:none之前的可见属性。


    ###效果和时长
    当在.show()或.hide()中指定时长(一个速度)参数时,就会产生动画效果,即效果会在一个特定的时间段内发生。

    ####指定显示速度
    对于jQuery提供的任何效果,都可以指定两种预设的速度参数:‘slow’和‘fast’。使用.show(‘slow’)会在600毫秒(0.6秒)内完成效果,而.show(‘fast’)则是200毫秒(0.2秒)。

    如果传入的是其他字符串,jQuery就会在默认的400毫秒内完成效果。要指定精确的速度,可以使用毫秒数值。

    ####淡入和淡出
    如果想在显示整个段落时,只是逐渐地增大其不透明度,可以使用.fadeIn(‘slow’)方法。

    ####滑上和滑下
    使用jQuery的.slideDown()和.slideUp()方法仅改变元素的高度。

    要让段落以垂直滑入的效果出现,可以使用:.slideDown('slow')

    ####切换可见性
    jQuery提供了一个.toggle方法,该方法的作用类似于.show()和.hide()方法,而且与它们一样的是,.toggle()方法时长参数也是可选的。

    另一个复合方法是.slodeToggle(),该方法通过逐渐增加或减少元素高度来显示或隐藏元素。


    ###创建自定义动画
    jQuery提供了一个强大的.animate()方法,用于创建控制更加精细的自定义动画。.animate()方法有两种形式,第一种形式接收以下4个参数。

    一个包含样式属性及值的对象:
    可选的时长参数:既可以是预置的字符串,也可以是毫秒数值。
    可选的缓动类型:
    可选的回调函数:

    4个参数放在一起:

    .animate({property:'value1',property2:'value2'},
    duration,easing,function(){
         alert('The animation is finished.');
         } );
    

    第二种形式接受两个参数,一个属性对象和一个选项对象。

    .animate({properties},{options})
    

    ###并发与排队效果
    排队效果,即让效果一个接一个地发生。

    ####处理一组元素
    当为同一组元素应用多重效果时,可以通过连缀这些效果轻易地实现排队。

    ####概括

    (1)一组元素上的效果:
    当在一个.animate()方法中以多个属性的方法应用时,是同时发生的。
    当以方法连缀的形式应用时,是按顺序发生的(排队效果)——除非queue选项值为false。
    (2)多组元素上的效果
    默认情况下是同时发生的。
    当在另一个效果方法或者在.queue()方法的回调函数中应用时,是按顺序发生的(排队效果)。

  • 相关阅读:
    ES6学习笔记<一> let const class extends super
    js_字符转Unicode
    (转)利用 SVG 和 CSS3 实现有趣的边框动画
    事件委托
    模拟操作
    jQUery动画
    jQUery事件
    jQuery的单选,复选,下拉
    jQuery中对属性的增删改查
    jQuery中其他
  • 原文地址:https://www.cnblogs.com/aixing/p/13327773.html
Copyright © 2011-2022 走看看