jQuery 学习总结 （二） 页面特效

在600毫秒内切换段落的高度和透明度 

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

移动效果

$(function() {
    //向左移动
    $("#left").click(function() {
        $(".block").show();
        $(".block").animate({
            width: "+200px",
            height: "+200px",
            fontSize: "1em",
            borderWidth: 10
        },
        "slow", "swing");
    });
    //向右移动
    $("#right").click(function() {
        $(".block").show();
        $(".block").animate({
            width: "-200px",
            height: "-200px",
            fontSize: "10em",
        },
        "slow", "swing");
    });
    /* 
$("p").animate({ 
    height: '200px', opacity: 'toggle' 
}, "slow"); 
$("p").animate({ 
    left: 50, opacity: 'show' 
}, 500); */
    //先渐隐 
    $("p").animate({
        opacity: 'toggle'
    },
    "slow", "swing");
    //后显示 
    $("p").animate({
        opacity: 'show'
    },
    500,
    function() {
        alert('加载完成');
    });
});

// 在一个动画中同时应用三种类型的效果 

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