jQuery实现动画、消失、显现、渐出、渐入效果示例

动画

使用jQuery可以轻松地实现动画效果，可以使用animate()方法实现动画效果。

animate()方法的语法结构如下：

$(selector).animate({param1: value1, param2: value2}, speed);

其中，selector为选择器，可以是任何jQuery支持的选择器，param为参数，表示要进行动画的属性，value表示当前属性值，speed参数可选，表示动画效果的速度。

以下是一个实现按钮悬浮动画的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery animate() Example</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            background-color: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn {
            width: 100px;
            height: 50px;
            color: #fff;
            background-color: #c82333;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s ease-in-out;
            cursor: pointer;
        }

        .btn:hover {
            transform: scale(1.1);
            background-color: #dc3545;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="btn">Hover Me</div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('.btn').hover(function() {
                $(this).animate({
                    backgroundColor: '#dc3545',
                    color: '#fff'
                }, 300);
            }, function() {
                $(this).animate({
                    backgroundColor: '#c82333',
                    color: '#fff'
                }, 300);
            });
        });
    </script>
</body>
</html>

消失和显现

使用jQuery可以轻松地实现元素的消失和显现效果，可以使用hide()和show()方法实现。

hide()和show()方法的语法结构如下：

$(selector).hide(speed, callback);
$(selector).show(speed, callback);

其中，selector为选择器，可以是任何jQuery支持的选择器，speed参数可选，表示动画效果的速度，callback参数也可选，表示回调函数。

以下是一个实现点击按钮切换显示/隐藏效果的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery hide() and show() Example</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            background-color: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #c82333;
            border-radius: 3px;
            display: none;
        }

        .btn {
            color: #fff;
            background-color: #343a40;
            border-radius: 3px;
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>

    <div class="btn">Toggle Display</div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('.btn').click(function() {
                $('.box').toggle(300);
            });
        });
    </script>
</body>
</html>

渐出和渐入

使用jQuery可以轻松地实现元素的渐出和渐入效果，可以使用fadeOut()和fadeIn()方法实现。

fadeOut()和fadeIn()方法的语法结构如下：

$(selector).fadeOut(speed, callback);
$(selector).fadeIn(speed, callback);

其中，selector为选择器，可以是任何jQuery支持的选择器，speed参数可选，表示动画效果的速度，callback参数也可选，表示回调函数。

以下是一个实现鼠标悬浮渐入渐出效果的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery fadeOut() and fadeIn() Example</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            background-color: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #c82333;
            border-radius: 3px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('.container').hover(function() {
                $('.box').fadeIn(300);
            }, function() {
                $('.box').fadeOut(300);
            });
        });
    </script>
</body>
</html>

以上是两个jQuery实现动画、消失、显现、渐出、渐入效果的示例，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现动画、消失、显现、渐出、渐入效果示例 - Python技术站

jQuery实现动画、消失、显现、渐出、渐入效果示例

jQuery实现动画、消失、显现、渐出、渐入效果示例

动画

消失和显现

渐出和渐入

相关文章