特效：基本、淡入淡出、滑動 (jQuery 22)

※基本特效

官網連結

目前有3個：
.hide()：隱藏
.show()：顯示
.toggle()：顯示／隱藏互換

※無參數用法

$(function(){
    $('button:first').click(function(){
        $('div').hide();
    });
    
    $('button:eq(1)').click(function(){
        $('div').show();
    });
    
    $('button:last').click(function(){
        $('div').toggle();
    });
});
----------
<div style="background-color:lightblue;">div</div>
<button>hide</button>
<button>show</button>
<button>toggle</button>

※三個可以混用

※有參數用法

$(function(){
    $('button:first').click(function(){
        $('div').hide(500, function(){
            alert('隱藏速度0.5秒');
        });
    });
    
    $('button:eq(1)').click(function(){
        $('div').show(1000);
    });
    
    $('button:last').click(function(){
        $('div').toggle(function(){
            alert('toggle finish!');
        });
    });
});
----------
<div style="background-color:lightblue;">div</div>
<button>hide</button>
<button>show</button>
<button>toggle</button>

※物件參數

$(function(){
    $('button:first').click(function(){
        var obj = {'duration':'slow', 'complete':alert('xxx')};
        $('div').hide(obj);
    });
    
    $('button:eq(1)').click(function(){
        $('div').show({'duration':'fast', 'complete':function(){alert('ooo')}});
    });
    
    $('button:last').click(function(){
        $('div').toggle('normal');
    });
});
----------
<div style="background-color:lightblue;">div</div>
<button>hide</button>
<button>show</button>
<button>toggle</button>

※slow就是600；fast是200

※官網有11個，我只示範我會的部分，其他有要用再研究

※淡入淡出特效

官網連結

目前有4個：
.fadeIn()：類似hide()
.fadeOut()：類似show()
.fadeTo()：透明度，參數是0~1
.fadeToggle()：類似toggle()

※fadeIn()、fadeOut()、fadeToggle()用法和基本特效一樣，就不貼範例了

※.fadeTo()

$(function() {
    $('button:first').click(function(){
        $('div').fadeTo('slow', 0.3, function(){
            alert('slow 33%');
        });
    });
    
    $('button:eq(1)').click(function(){
        $('div').fadeTo('fast', 0.6, function(){
            alert('fast 66%');
        });
    });
    
    $('button:last').click(function(){
        $('div').fadeTo('normal', 1);
    });
});
----------
<div style="background-color:lightblue;">div</div>
<button>33%</button>
<button>66%</button>
<button>100%</button>

※滑動特效

官網連結

目前有3個：
.slideUp()：類似hide()
.slideDown()：類似show()
.slideToggle()：類似toggle()

※用法和基本特效一樣，就不貼範例了