《JQuery基础教程》第四版课后练习代码--第四章

1、修改样式表，一开始先隐藏页面内容，当页面加载后，慢慢地淡入内容

$(document).ready(function () {
    var $body=$("body");
    $body.hide();
    $body.fadeIn("slow");
})

2、在鼠标悬停到段落上面时，给段落应用黄色背景

$(document).ready(function () {
    var $p=$(".speech p");
    $p.mouseover(function() {
        $(this).css("background-color", "yellow");
    });
    $p.mouseout(function () {
        $(this).css("background-color", "white");
    })
})

或者

$(document).ready(function () {
    var $p=$(".speech p");
    $p.mouseover(function() {
        $(this).css("background-color", "yellow").mouseout(function () {
            $(this).css("background-color", "white");
        })
    })
})

3、单击标题（<h2>)使其不透明度变为25%，同时添加20px的左外边距，当这两个效果完成后，把讲话文本变成50%的不透明度

$(document).ready(function () {
    $("h2").click(function(){
        $(this).animate({
            opacity:'0.25',
            marginLeft:'+=20px'  },'slow');
        $(".speech").animate({
            opacity:'0.5'  },'slow');
    })
})

4、挑战：按下方向键时，使样式转换器向相应的方向平滑移动20像素；四个方向键的键码分别是37（左）、38（上）、39（右）、40（下）。

$(document).ready(function () {
    $("#switcher").css('position','relative');
    $(document).keyup(function(event){
        switch(event.keyCode){
            case 37:
                $("#switcher").animate({left:'-=20px'},'slow');
                break;
            case 38:
                $("#switcher").animate({top:'-=20px'},'slow');
                break;
            case 39:
                $("#switcher").animate({left:'+=20px'},'slow');
                break;
            case 40:
                $("#switcher").animate({top:'+=20px'},'slow');
                break;
            default:
                break;
        }
    })
})