jquery 之效果

// jquery 之效果 .css()既可以获取值，如 .css('fontSize'), 又可以设置内置属性，既可用驼峰式，也可以用连字符版，如 .css('background-color', '#ff0000') 或 .css('backgroundColor', '#ff0000'), 既可以传递一组值，也可以传递多组值 如： .css('fontSize', '16px') 或形如 .css({'fontSize': '16px', 'backgroundColor': '#ff0000'}), 注意，$ 在也是合法的 变量

$(document).ready(function(){
    var $speech = $('div.speech');
    var defaultSize = $speech.css('fontSize');
    $('#switcher button').click(function(){
        var num = parseFloat($speech.css('fontSize'), 10);
        switch(this.id)
        {
            case 'switcher-large':
                num *= 1.4;
                break;
            case 'switcher-small':
                num /= 1.4;
                break;
            default:
                num = parseFloat(defaultSize, 10);
        }
        //$speech.css('fontSize', num + 'px');
        $speech.animate({'fontSize': num + 'px'}, 'slow');
    });
});

// 显示 .show([]), 隐藏 .hide();, 如果指定的参数为 slow (0.6秒), normal(0.4秒), fast(0.2秒), 也可以直接用数值表示，此时的时间单位为 微秒 ,淡入淡出   fadeIn() 淡入即显示, fadeOut() 淡出即隐藏
/*
$(document).ready(function(){
    var $firstPara = $('p:eq(1)');
    $firstPara.hide();
    $('a.more').click(function(){
        $('p:eq(1)').show('slow');
        $(this).hide('fast');
        return false;
    });
});
*/

// 可以用 slideToggle() 方法相互切换显示与隐藏
/*
$(document).ready(function(){
    var $firstPara = $('p:eq(1)');
    $firstPara.hide();
    $('a.more').click(function(){
        $firstPara.slideToggle('slow');
        var $link = $(this);
        if($link.text() == "read more")
        {
            $link.text('read less');
        }else
        {
            $link.text('read more');
        }
        return false;
    });
});
*/
// jquery 自定义动画 .animate();两种形式，第一种： 接受四个参数，后三个参数可选，如 .animate({property1: value, property2: value2}, speed, easing, function(){});,第一个参数为属性及值的映射，第二个是速度参数，第三个是缓动参数，第四个是回调函数, 第二种形式为 .animate({}, {options}), 其实第二个参数就是第一种形式后三个参数的集合形式

$(document).ready(function(){
    var $firstPara = $('p:eq(1)');
    $firstPara.hide();
    $('a.more').click(function(){
        var $link = $(this);
        $firstPara.animate({
                opacity: 'toggle',
                height: 'toggle'
            }, 'slow');
        if($link.text() == "read more")
        {
            $link.text('read less');
        }else{
            $link.text('read more');
        }
        return false;
    });
});

$(document).ready(function(){
    $('p:eq(2)')
        .css('border', '1px solid #333')
        .click(function(){
            $(this).slideUp('slow')
                .next().slideDown('slow');
        });
        $('p:eq(3)').css('backgroundColor', '#ccc').hide();
});