jQuery animations (rotation)

jQuery - Animated

jQuery animation divided into three parts, the non-custom animations, custom animations, and animation global settings.

A non-custom animation:

　　 1. Display, hide:

　　show( ) 、hide( )、toggle()

　　　　Two ways: 1) does not pass parameters, represents a direct display hidden.

　　　　　　　　　2) pass a parameter to the method, this parameter is a number type, representative of the execution time of the animation. It will display the hidden animations.

　　　　　　Example: show (100), hide (100), toggle (100)

　　　　　　In addition, jQuery string also provides three methods for the animation parameters: fast, slow, and the empty string ''

　　　　　　示例:show('fast')、hide('slow')、toggle('')

　　　　　　　　　　Execution time are three kinds of parameters: 'fast': 200 ms '' (default): 400 msec 'slow': 600 ms

　　 2. Slide:

　　slideUp (): slide upward (hidden)

　　slideDown (): slide down (shown)

　　slideToggle (): sliding (automatic)

　　 3. Fade:

　　fadeOut (): fade out (hidden)

　　 fadeIn (): Fade (display)

　　fadeToggle (): Show hidden () automatically

　　　 fadeTo (), which accepts two parameters.

　　　　　　　　Parameter 1 is the time of executing the animation, parameter 2 is expected to achieve transparency.

Second, the custom animation

　　 animate () method

　　Animate () method takes three arguments. Are animated goal (target), the animation execution time, the callback function. Only the first parameter is a required parameter.

Animate () method using:

　　The converting element attributes custom animation target property, together with all the attributes change parameters.

animate({
        'width':'200px'，
        'height':'200px'
    })

　　Attribute set, support operations.

animate({
        'width':'+=200px'
    })

If you want the animation execution order (immediately after the first movie, and then perform the next animation) There are three ways:

　　1) With the callback function animation (when the operation of different elements, it is recommended to use a callback function)

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    },function(){
        $('div').animate({
            'width':'200px',
            'height':'200px'
        })
    })
})

　　2) write separate animation

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    })
    $('div').animate({
        'width':'200px',
        'height':'200px'
    })
})

　　3) put together (work on the same elements when put together are recommended)

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    }).animate({
        'width':'200px',
        'height':'200px'
    })
})

Third, animation and related methods

　　 1.stop () method

　　　　This method is a method to stop the animation, he has two parameters are Boolean values.

　　　　　　Parameter 1: whether to clear the animation on behalf of the queue; Parameter 2: whether to run directly on behalf of the final results

　　 2.delay () method

　　　　Delayed execution, the method has a parameter, a delay of several milliseconds.

　　 3. The animation of recursive

$('div').slideToggle(2000,recursion)

function recursion(){
    $(this).slideToggle(2000,recursion)
}

　　　　Comes with high-level writing:

$ ( 'div') slideToggle (2000, function () {. 
    $ (the this) .slideToggle (2000, The arguments.callee) 
}) 

//arguments.callee: anonymous common function, representative of the current function.

jQuery animation above.

jQuery animations (rotation)

Guess you like