Introduction to the use of jQuery animation animate method

Functions for creating custom animations.
Return value: jQuery animate(params, [duration], [easing], [callback])

If you use characters like "hide", "show" or "toggle" String value, the default animation mode will be called for the attribute . paramsOptions A set of packages

Contains style attributes and their values ​​as animation attributes and final values ​​​​

params object {}, note: all specified attributes must be in camel form, such as using marginLeft replaces margin-left. If a string value such as "hide",

"show" or "toggle" is used, the default animation form will be called for this property.

duration (optional) A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration (such as: 1000)

easing (optional)StringThe name of the erasure effect to be used (requires plug-in support). By default jQuery provides "linear" and "swing"

callback (optional)Function Function executed when the animation is completed

0. Stop the animation

if($('.swaplist,.mainlist').is(':animated')){
    $('.swaplist,.mainlist').stop(true,true);
}

animate instance:
1. After clicking the button, the p element Several different attributes change together

$("#go").click(function () {
    $("#block").animate({
        width: "90%",
        height: "100%",
        fontSize: "10em",
        borderWidth: 10
    }, 1000);
});

2. Move the specified element left and right

$("#right").click(function () {
    $(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
    $(".block").animate({ left: '-50px' }, "slow");
});

3. In 600 milliseconds Switch the height and transparency of the paragraph within

$("p").animate({
    height: 'toggle', opacity: 'toggle'
}, "slow");

4. Use 500 milliseconds to move the paragraph to the left position of 50 and display it completely clearly (transparency is 1)

$("p").animate({
    left: 50, opacity: 'show'
}, 500);

5. Switch show and hide

$(".box h3").toggle(function(){ 
    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
        $(this).addClass("arrow"); 
        return false; 

    },function(){ 
        $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
        $(this).removeClass("arrow"); 
        return false; 
    }); 
});

//滚动焦点
$(window).scroll(function () {              //当前窗口的滚动事件
var winTop = $(window).scrollTop();     //获取当前窗口的大小
var objTop = $("#obj1").offset().top;   //获取当前对象的x坐标
});

The above is the detailed content of Introduction to the use of jQuery animation animate method. For more information, please follow other related articles on the PHP Chinese website!