jQuery 动画与停止动画效果实例详解

时间：2023-12-08

本次攻略将会重点讲解jQuery中动画效果的运用与实现，同时还会包括如何停止动画效果。

jQuery 动画的基本使用方法

我们知道，jQuery提供了许多丰富的动画方法，如animate()、fadeIn()、fadeOut()、slideDown()、slideUp()等等，这里我们以animate()为例进行详细讲解。

animate()的基本语法如下：

$(selector).animate({params},speed,callback);

其中，selector表示选择器，params表示CSS的属性和值，speed表示动画时长，callback表示动画执行完毕之后所执行的函数。

下面是一个具体的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 动画效果实例</title>
<style>
#box {
    background-color: pink;
    width: 200px;
    height: 200px;
    position: relative;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px', opacity: '0.5'}, "slow");
    });
});
</script>
</head>
<body>
<div id="box"></div>
<button>向右移动</button>
</body>
</html>

上面的代码实现了点击按钮使一个方形的盒子向右移动的功能，并且过程中缓慢变成半透明。

jQuery 停止动画的方法

jQuery中，我们可以通过stop()方法来停止正在进行的动画效果，其语法如下：

$(selector).stop(stopAll,goToEnd);

其中，stopAll表示是否停止所有的动画效果（默认值为false），goToEnd表示是否立即跳转到动画效果的结束状态（默认值为false）。

下面是一个具体的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 停止动画效果实例</title>
<style>
#box {
    background-color: pink;
    width: 200px;
    height: 200px;
    position: relative;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px', opacity: '0.5'}, 5000);
    });
    $("button.stop").click(function(){
        $("#box").stop();
    });
});
</script>
</head>
<body>
<div id="box"></div>
<button>开始移动</button>
<button class="stop">停止移动</button>
</body>
</html>

上面的代码实现了点击第一个按钮使一个方形的盒子向右移动的功能，并且过程中缓慢变成半透明，再点击第二个按钮停止移动。

以上就是关于jQuery动画与停止动画效果的详细讲解，希望对您有所帮助。

上一篇：JS 函数的 call、apply 及 bind 超详细方法 下一篇：JavaScript ES6中const、let与var的对比详解

jQuery 动画与停止动画效果实例详解

相关文章