zoukankan html css js c++ java

<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>

查看全文

相关阅读:
java基础2(Map)
java基础1
数据类型
 入门&常量&变量
 spark 机器学习朴素贝叶斯原理(一)
spark 机器学习 knn 代码实现(二)
spark 机器学习 knn原理(一)
spark 机器学习 ALS原理(一)
数学符号表及读法
 spark 机器学习基础数据类型

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