jquery 基本动画效果

- jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。

三组基本动画

- 显示(show)与隐藏(hide)与切换(toggle)是一组动画：
- 滑入(slideUp)与滑出(slideDown)与切换(slidetoggle)，效果与卷帘门类似
- 淡入(fadeIn)与淡出(fadeOut)与切换(fadetoggle)

第一组基本动画案例：

<body>

   <div style="width: 500px;height: 300px;background-color: #ccc">     
   </div>

   <button id="show">显示</button>
   <button id="hide">隐藏</button>
   <button id="toggle">切换</button>

<script type="text/javascript">

    $(function(){
        $('#show').click(function(){
            $('div').show(1000);
            //$('div').show(); 不传参数就是马上显示

        });
        $('#hide').click(function(){
            $('div').hide(1000);
            //$('div').hide(); 不传时间就是马上隐藏

        });
        $('#toggle').click(function(){
            $('div').toggle(1000);
            //$('div').toggle();

        });

    })

</script>
</body>

第二组基本动画案例：

<body>

   <div style="width: 500px;height: 300px;background-color: #ccc;display: none;">     
   </div>

   <button id="slideUp">上滑</button>
   <button id="slideDown">下拉</button>
   <button id="slidetoggle">切换</button>

<script type="text/javascript">

    $(function(){
        $('#slideUp').click(function(){
            $('div').slideUp(500);
            //$('div').slideUp(); 不传参数就是默认时间

        });
        $('#slideDown').click(function(){
            $('div').slideDown(500);
            //$('div').slideDown(); 不传时间就是默认时间

        });
        $('#slidetoggle').click(function(){
            $('div').slidetoggle(500);
            //$('div').slidetoggle();

        });

    })

</script>
</body>

第三组基本动画案例：

<body>

   <div style="width: 500px;height: 300px;background-color: #ccc;">     
   </div>

   <button id="fadeIn">淡入</button>
   <button id="fadeOut">淡出</button>
   <button id="fadetoggle">切换</button>

<script type="text/javascript">

    $(function(){
        $('#fadeIn').click(function(){
            $('div').fadeIn(500);
            //$('div').fadeIn(); 不传参数就是默认时间

        });
        $('#fadeOut').click(function(){
            $('div').fadeOut(500);
            //$('div').fadeOut(); 不传时间就是默认时间

        });
        $('#fadetoggle').click(function(){
            $('div').fadetoggle(500);
            //$('div').fadetoggle();

        });

    })

</script>
</body>

jquery 基本动画效果

相关推荐