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()方法的回调函数中应用时,是按顺序发生的(排队效果)。

  • 相关阅读:
    hadoop再次集群搭建(3)-如何选择相应的hadoop版本
    48. Rotate Image
    352. Data Stream as Disjoint Interval
    163. Missing Ranges
    228. Summary Ranges
    147. Insertion Sort List
    324. Wiggle Sort II
    215. Kth Largest Element in an Array
    快速排序
    280. Wiggle Sort
  • 原文地址:https://www.cnblogs.com/aixing/p/13327773.html
Copyright © 2011-2022 走看看