jQuery内置特效

一、基础特效

1. .hide():隐藏匹配的元素。
2. .show():显示匹配的元素。
3. .toggle():显示或隐藏匹配元素。

<button class="hide">hide</button>
<button class="show">show</button>
<button class="toggle">toggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('.hide').click(function(){
        // $('div').hide('normal');
        // $('div').hide('fast');//可以使字符，也可以是数字，动画的时间
        $('div').hide(1000,function(){
            console.log("隐藏完毕");
        });
    });
    $('.show').click(function(){
        // $('div').hide('normal');
        // $('div').hide('fast');
        $('div').show(1000,function(){
            console.log('显示完毕');
        });
    });
    var n = 0;
    $('.toggle').click(function(){ 
        $('div').toggle(1000,function(){
            var reg = n++ % 2;
            if(reg == 0){
                console.log('隐藏完毕',n);
            }else{
                console.log("显示完毕",n);
            };
        });
    });
</script>

二、滑动特效

1. .slideDown():用滑动动画显示一个匹配元素。
2. .slideToggle():用滑动动画显示或隐藏一个匹配元素。
3. .slideUp():用滑动动画隐藏一个匹配元素。

<button class="slideUp">slideUp</button>
<button class="slideDown">slideDown</button>
<button class="slideToggle">slideToggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('.slideUp').click(function(){
        // $('div').hide('normal');
        // $('div').hide('fast');//可以使字符，也可以是数字，动画的时间
        $('div').slideUp(1000,function(){
            console.log("隐藏完毕");
        });
    });
    $('.slideDown').click(function(){
        // $('div').hide('normal');
        // $('div').hide('fast');
        $('div').slideDown(1000,function(){
            console.log('显示完毕');
        });
    });
    var n = 0;
    $('.slideToggle').click(function(){ 
        $('div').slideToggle(1000,function(){
            var reg = n++ % 2;
            if(reg == 0){
                console.log('隐藏完毕',n);
            }else{
                console.log("显示完毕",n);
            };
        });
    });
</script>

三、渐变特效

1. .fadeIn():通过淡入的方式显示匹配元素。
2. .fadeOut():通过淡出的方式隐藏匹配元素。
3. .fadeTo():调整匹配元素的透明度。
4. .fadeToggle():通过匹配的元素的不透明度动画，来显示或隐藏它们。

<button class="fadeOut">fadeOut</button>
<button class="fadeIn">fadeIn</button>
<button class="fadeTo">fadeTo</button>
<button class="fadeToggle">fadeToggle</button>
<div></div>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('.fadeOut').click(function(){
        // $('div').hide('normal');
        // $('div').hide('fast');
        $('div').fadeOut(1000,function(){
            console.log("隐藏完毕");
        });
    });
    $('.fadeIn').click(function(){
        // $('div').hide('normal');
        // $('div').hide('fast');
        $('div').fadeIn(1000,function(){
            console.log('显示完毕');
        });
    });
    $('.fadeTo').click(function(){
        // $('div').hide('normal');
        // $('div').hide('fast');
        $('div').fadeTo('normal',0.5,function(){
            console.log('显示完毕');
        });
    });
    var n = 0;
    $('.fadeToggle').click(function(){ 
        $('div').fadeToggle(1000,function(){
            var reg = n++ % 2;
            if(reg == 0){
                console.log('隐藏完毕',n);
            }else{
                console.log("显示完毕",n);
            };
        });
    });
</script>

三、自定义特效

1. .animate():根据一组 CSS 属性，执行自定义动画。
2. .delay():设置一个延时来推迟执行队列中后续的项。
3. .finish():停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
4. .stop():停止匹配元素当前正在运行的动画。

$('.animate').click(function(){ 
    $('div').animate({width:500},4000)
         .animate({height:500},'normal')
         .delay(1000)
         .animate({opacity:0.5},'normal')
});
$('div').click(function(){
    // $('div').stop();
    $('div').finish();
});