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);
});