用jQuery编写简单的动画效果

爱被打了一巴掌 2024-03-24 21:12 49阅读 0赞

jQuery是一种基于JavaScript库的快速、小型而且特别丰富的JavaScript库。它极大地简化了HTML文档遍历和操作、事件处理、动画效果和AJAX交互等功能。jQuery中的各种动画函数可以让我们轻松地为网页添加各种各样的动画效果，同时让网页更加生动和有趣。本文将通过一些简单的代码示例，来介绍如何使用jQuery编写简单的动画效果。

#### 一、选择器选取 ####

在jQuery中，可以使用CSS选择器来选取HTML元素，然后对这些元素进行操作。以下是一些常用的CSS选择器： - 类选择器：通过类名来选取HTML元素

$(".className")

Copy

\- ID选择器：通过ID来选取HTML元素

$("#idName")

Copy

下面以class选择器为例，来实现一个点击按钮让文字变色的效果：

jQuery动画
        
            .change {
                color: #000;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                margin: 20px;
            }
            .btn {
                display: block;
                width: 100px;
                height: 50px;
                margin: 0 auto;
                background-color: #ccc;
                border: none;
                outline: none;
                cursor: pointer;
            }
        
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".btn").click(function(){
                    $(".change").css("color","#f00");
                });
            });
        </script>
    
    
        
            点击按钮，文字变红
        
        点击

Copy

点击按钮之后，文字的颜色就会变成红色。

#### 二、隐藏和显示 ####

除了改变颜色，我们还可以使用jQuery的hide和show函数来实现元素的隐藏和显示。这两个函数会给予元素一个渐变的效果，让元素显得更加平滑、自然。以下是hide和show函数的调用方式： - 隐藏元素：

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

Copy

\- 显示元素：

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

Copy

speed参数可选，表示渐变的速度。callback参数也可选，在隐藏或显示效果执行完成后，该函数会被执行。下面是一个简单的示例，在点击按钮时，隐藏并显示文本：

jQuery动画
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("p").hide(2000,function(){
                        alert("元素已经被隐藏");
                        $("p").show(1000,function(){
                            alert("元素现在又已经显示了");
                        });
                    });
                });
            });
        </script>
    
    
        点击按钮来隐藏和显示这段文字
        Click me

Copy

点击按钮之后，文本会先通过2000ms的渐变隐藏，然后alert弹框提示用户元素已经隐藏，最后通过1000ms的渐变效果再次显示。

#### 三、淡入淡出和滑动 ####

除了hide和show，jQuery还提供了fadeOut、fadeIn、slideUp和slideDown等函数来实现淡入淡出和滑动效果。以下是这些函数的调用方式： - 淡出一个元素：

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

Copy

\- 淡入一个元素：

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

Copy

\- 向上滑动一个元素：

$(selector).slideUp(speed,callback);

Copy

\- 向下滑动一个元素：

$(selector).slideDown(speed,callback);

Copy

这些函数与hide和show函数相似，也需要提供一个speed参数，表示渐变的速度，以及一个可选的callback函数。下面是一个示例，在鼠标滑过图片时，图片会有淡入淡出的效果：

jQuery动画
        
            #img-cont {
                overflow: hidden;
            }
            img {
                width: 100%;
                height: auto;
            }
        
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("img").mouseover(function(){
                    $(this).fadeOut(1000,function(){
                        $(this).fadeIn(1000);
                    });
                });
            });
        </script>

Copy

当鼠标滑过图片时，图片会先通过1000毫秒的淡出渐变隐藏，然后又会通过1000毫秒的淡入渐变重新显示。 以上就是使用jQuery编写简单的动画效果的介绍，通过选择器选取、隐藏和显示、淡入淡出和滑动等方法，我们可以轻松地实现各种各样的动画效果，给网页增添趣味性和互动性。