jQuery animation (seven)

A, jQuery object style related method
1, a height and width
height ([NUM])     [ Gets or sets the value of the style property height ]
Gets pattern height of the first element or matching elements to match all elements of the style set height value


([NUM]) width         [ Gets or sets the width of the style property ]
Gets or sets the width style matching elements in the first element of the

description:
a, parameters
without parameters: acquiring attribute values corresponding to the first element matching element
there reference num: set all matched elements corresponding property value num, and returns the matching elements of the array object type jQuery
b, height (), width ( ) to get and set property values css (attr, [val]) to get and set except that the values:
    the value of the acquired pattern thereof numerical property [ number with no units ], and the value obtained css (), compared with the value of the string with the unit

2, get or set the internal height and width
innerHeight ([num])     [ Gets or sets the internal height ]
Gets the first element [internal height matching element including padding, but not border } or all of the matching element disposed inside height


innerWidth (num)     [ Gets or sets the internal width ]
Get the internal width of the first matching element [element including padding, but not border } or all of the matching element disposed inside width

Description:
A, parameters
without parameters: obtaining matching elements the first element attribute values corresponding
with a parameter num: set all matched elements corresponding property value num, and returns the matching elements jQuery array object class
B, does not apply to window and document objects, these objects can be used for height () and width () instead of

3, get or set the region height and width of
instructions:
using rules and innerHeight (), innerWidth () the same, except that their width and height obtained is : margin + border + padding + SUMMARY width and height
outerHeight ()     [ Gets or sets the height region of ]

the outerWidth ()     [ Gets or sets the area width ]

4, get or set the element location
offset ()
Gets or sets the first coordinate of the current coordinates of the matching elements in a element of a matching element [each coordinate with respect to the document ]

position ()
Positional shift amount obtaining a first matching element of the element or offset position for each set of matched elements [ with respect to the parent element offset position ]

5, get or set the position of the slider
the scrollLeft ()     [ Gets or sets the position of the horizontal scroll bar ]
Gets the horizontal set of matched elements of the current level of the first scroll bar element is provided for each match location or position of the slider element.

scrollTop ()         [ Gets or sets the position of the vertical scroll bar ]
for a matching set of elements of the current vertical scroll bar elements of the first position or the position of the vertical scroll bar is provided for each matching element.

the offsetParent ()     [ Get latest positioning ancestor ]
Get nearest ancestor element containing location information of the specified element

two, jQuery displaying and hiding related method
the following correlation method Parameters :
DURATION: execution duration related operations [ ms ]
function : callback is executed after the completion of the operation

1, a method of displaying and hiding the display property set [ the hidden element does not occupy the space ]
hide ([duration], [function  ])        Hide

show ([duration], [function  ])        show

toggle ([duration], [function ])     displaying and hiding switched with each other
Toggle (Boolean)         Boolean: to true display element; to false hidden element

2, displaying opacity property and concealing method [ after the hidden elements occupy space ]
fadeIn ([duration], [function ])     fade [display]

fadeOut ([duration], [function ])     fade [hide]

fadeTo (duration, opacity, [function ])     transparency fading to the number [ changing element transparency]

fadeToggle ([duration], [function  ])    fade switching between the [displaying and hiding handover] each

3, the display and concealment method height properties of [ the hidden element does not occupy the space ]
slideDown ([duration], [function])         fell [display]

slideUp ([duration], [function  ])        on the slide [Hide]

slideToggle ([duration], [function ])    On each falling switching each switch displaying and hiding []

Third, the custom animation effects
Animate (obj, [DURATION], [Complete])
obj: element needs changed attribute value attribute value pairs consisting of a collection of objects
eg:

    // Click the button button to the div width is set to 300px, margin-top is set to 100px, the duration of 2000 ms 
    $ ( 'button') the Click (. Function () { 
        $ ( 'div' ) .animate ({ 
            width: '300px by' , 
            marginTop: '100px' 
        }, 2000 ); 
    });


stop ([stopAll], [goToEnd  ])    to stop execution of the current animation
parameters:
A, stopAll parameter specifies whether to clear the animation queue, the default is false [] cease only currently active animation, animation allow any queued backward execution
b, goToEnd parameter specifies whether to immediately complete the current animation [default is false]
eg:

    //点击button按钮后再动画未执行完再次点击button按钮则会停止当前动画立即执行下一次动画
    $('button').on('click', function(){
        $('.first').stop().slideToggle(2000);
    });


finish()    所有动画的CSS属性跳转到他们的最终值

queue([queueName])    获取匹配元素上的已经执行的函数列队
参数
queueName:一个含有队列名的字符串。默认是fx,标准的动画队列

clearQueue()    从列队中移除所有未执行的项【类似于stop(true)

拓展:
queue([queueName])、clearQueue()相关详细解释说明可以查看菜鸟教程:https://www.runoob.com/jquery/eff-queue.html

delay()    延迟一段时间在执行后面的方法【只有队列中连续的事件会延迟   即:需要带有持续时间参数的动画
eg:

    //div1,div2同时滑上,div1延迟2000毫秒再淡入
    $("button").click(function() {
        $("div.first").slideUp(3000).delay(2000).fadeIn(4000);
        $("div.second").slideUp(3000).fadeIn(4000);
    });



Guess you like

Origin www.cnblogs.com/nzcblogs/p/11272812.html