jQuery动画效果详解-优快云博客

本文详细介绍jQuery中各种动画效果的实现方法，包括显示、隐藏、淡入淡出、滑动及自定义动画等，并通过实例展示了如何使用jQuery进行动画控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要介绍关于jquery的一些动画效果。包括显示、隐藏、淡入、淡出、透明度、滑动、动画效果以及停止动画等操作。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#b1").click(function() {
            $("#p1").show();//显示
        });

        $("#b2").click(function() {
            $("#p1").hide();//隐藏
        });

        $("#b3").click(function() {
            $("#d1").fadeIn();//淡入
        });
        $("#b4").click(function() {
            $("#d1").fadeOut();//淡出
        });
        $("#b5").click(function() {
            //淡出淡出切换,可以有参数slow或者fast
            $("#d1").fadeToggle("slow");
        });
        $("#b6").click(function() {
            //透明度
            $("#d1").fadeTo("slow", 0.1);
            $("#d2").fadeTo("slow", 0.5);
            $("#d3").fadeTo("slow", 0.9);
        });
        $("#b7").click(function() {
            //向下滑动
            $("#d4").slideDown("slow");
        });
        $("#b8").click(function() {
            //向上滑动
            $("#d4").slideUp("slow");
        });
        $("#b9").click(function() {
            //移动
            $("#d5").animate({
                left : '500px'
            }, 'slow');
        });
        $("#b10").click(function() {
            //动画效果
            $("#d5").animate({
                left : '500px',
                opacity : 0.5,
                height : '150px',
                width : '150px'
            }, 'slow');
        });
        $("#b11").click(function() {
            //动画效果
            $("#d5").animate({
                left : '500px',
                opacity : 0.5,
                height : '+=150px',
                width : '+=150px'
            }, 'slow');
        });
        $("#b12").click(function() {
            $("#p2").show(function() {
                alert("abc出来了！");
            });
        });
        $("#b13").click(function() {
            //动画停止
            $("#d5").stop();
        });
    });
</script>
</head>
<body>
    <input type="button" value="显示" id="b1">
    <input type="button" value="隐藏" id="b2">
    <p id="p1">这是一段文本</p>
    <hr />
    <input type="button" value="淡入" id="b3">
    <input type="button" value="淡出" id="b4">
    <input type="button" value="淡入淡出切换" id="b5">
    <input type="button" value="透明度" id="b6">
    <div id="d1"
        style="width: 100px; height: 100px; background-color: red; margin: 10px;"></div>
    <div id="d2"
        style="width: 100px; height: 100px; background-color: green; margin: 10px;"></div>
    <div id="d3"
        style="width: 100px; height: 100px; background-color: blue; margin: 10px;"></div>
    <hr />
    <input type="button" value="向下滑动" id="b7">
    <input type="button" value="向上滑动" id="b8">
    <div id="d4"
        style="width: 500px; height: 100px; background-color: gray; display: none;">
        <p>abc</p>
        <p>def</p>
    </div>
    <hr />
    <input type="button" value="回调事件" id="b12">
    <p id="p2" style="display: none;">abc</p>
    <hr />
    <input type="button" value="向左移动" id="b9">
    <input type="button" value="动画效果2" id="b10">
    <input type="button" value="动画效果3" id="b11">
    <input type="button" value="停止" id="b13">
    <div id="d5"
        style="width: 100px; height: 100px; background-color: red; margin: 10px; position: absolute;"></div>
</body>
</html>

JQuery之动画效果