[JavaScript] (Day-27) - jQuery

2017-07-20 本文已影响38人已重置2020

Learn wisdom by the follies of others. 要从别人的愚行中学到聪明。

使用jQuery实现动画，代码已经简单得不能再简化了：只需要一行代码！

jQuery内置的几种动画样式：

show / hide

直接以无参数形式调show()和hide()，会显示和隐藏 DOM 元素。但是，只要传递一个时间参数进去，就变成了动画
show()和hide()是从左上角逐渐展开或收缩的

<head>
    <meta charset="utf-8" />
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <button id="hide">Hide</button>
    <button id="show">Show</button>
    <button class="toggle">Toggle</button>
        
    <div id="test-show-hide">![](img/horse-circle.png)</div>
</body>

<script>
    $('#hide').click(function(){
        $("#test-show-hide").hide(3000);
    });
        
    $("#show").click(function(){
        $("#test-show-hide").show(3000);
    });
        
    $('.toggle').click(function(){
        $("#test-show-hide").toggle(2000);
    });
</script>

Hide-show-animation

slideUp / slideDown

slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的

<body>
    <button id="up">SlideUp</button>
    <button id="down">SlideDown</button>
    <button class="toggle">SlideToggle</button>
        
    <div id="test-slide-upDown">![](img/horse-circle.png)</div>
</body>
    
<script>
    $('#up').click(function(){
        $("#test-slide-upDown").slideUp(3000);
    });
        
    $("#down").click(function(){
        $("#test-slide-upDown").slideDown(3000);
    });
        
    $('.toggle').click(function(){
        $("#test-slide-upDown").slideToggle(2000);
    });
</script>

slide-down-up-animation

fadeIn / fadeOut

fadeIn()和fadeOut()的动画效果是淡入淡出，也就是通过不断设置 DOM 元素的opacity属性来实现，而fadeToggle()则根据元素是否可见来决定下一步动作

<body>
    <button id="fadeIn">FadeIn</button>
    <button id="fadeOut">FadeOut</button>
    <button class="fadeToggle">FadeToggle</button>
        
    <div id="test-fade">![](img/horse-circle.png)</div>
</body>
    
<script>
    $('#fadeIn').click(function(){
        $("#test-fade").fadeIn(1000);
    });
        
    $("#fadeOut").click(function(){
        $("#test-fade").fadeOut(1000);
    });
        
    $('.fadeToggle').click(function(){
        $("#test-fade").fadeToggle(2000);
    });
</script>

fade-in-out-animation

自定义动画

animate()，它可以实现任意动画效果，我们需要传入的参数就是 DOM 元素最终的 CSS 状态和时间，jQuery 在时间段内不断调整 CSS 直到达到我们设定的值

<body>
    <button id="animation">Start Animation</button>
        
    <div id="test-animation" >![](img/horse-circle.png)</div>
</body>
    
<script>
    $('#animation').click(function(){
        var div = $('#test-animation');
        div.animate({
            opacity: 0.25,
            width: '50px',
            height: '50px'
        });
    });
</script>

animate()还可以再传入一个函数，当动画结束时，该函数将被调用

<script>
    $('#animation').click(function(){
        var div = $('#test-animation');
        div.animate({
            opacity: 0.25,
            width: '50px',
            height: '50px'
        }, 3000, function () {
            console.log('动画已结束');
            // 恢复至初始状态:
            $(this).css('opacity', '1.0').css('width', '100px').css('height', '100px');
        });
    });
</script>

DIY-animation

串行动画

jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，这样，我们可以实现更复杂的动画效果

<script>
    $('#animation').click(function(){
        var div = $('#test-animations');
        // 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
        div.slideUp(3000).delay(1000).slideDown(2000).delay(1000).animate({
            opacity: 0.25
        }).delay(1000).fadeIn(2000).hide(1000);
    });
</script>

serial-Animation