<jQuery> 十一. 基本动画(显示, 隐藏, 滑入, 滑出, 淡入淡出)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="切换">

<input type="button" value="滑出">
<input type="button" value="滑入">
<input type="button" value="切换">

<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="切换">
<div></div>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function () {
        // toggle 会根据动画效果来自动切换
        // 显示隐藏
        $("input").eq(0).click(function () {
            $("div").hide(1000);
        })
        $("input").eq(1).click(function () {
            $("div").show(1000);
        })
        $("input").eq(2).click(function () {
            $("div").toggle(1000);
        })

        // 滑入滑出
        $("input").eq(3).click(function () {
            $("div").slideUp(1000);
        })
        $("input").eq(4).click(function () {
            $("div").slideDown(1000);
        })
        $("input").eq(5).click(function () {
            $("div").slideToggle(1000);
        })

        // 淡入淡出
        $("input").eq(6).click(function () {
            $("div").fadeOut(1000);
        })
        $("input").eq(7).click(function () {
            $("div").fadeIn(1000);
        })
        $("input").eq(8).click(function () {
            $("div").fadeToggle(1000);
        })
    })
</script>

</body>
</html>

相关阅读:
使用匿名内部类和lamda的方式创建线程
匿名内部类与lamda表达式
机器学习中数据量多少与模型过拟合欠拟合之间的关系
设计模式和java实现
八大排序算法汇总——java实现
java多线程并发编程中的锁
java NIO
网络通信引擎ICE的使用
机器学习算法汇总大梳理
处理样本不均衡数据

原文地址：https://www.cnblogs.com/ZeroHour/p/8267964.html