jQuery常见动画效果实现介绍

jQuery常见动画效果实现方法

原创已于 2025-06-27 14:08:10 修改 · 374 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css3

于 2025-05-24 17:22:49 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery常见动画效果实现介绍</title>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
color: #333;
background-color: #f5f5f5;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #2980b9;
margin-top: 30px;
border-left: 4px solid #3498db;
padding-left: 10px;
}
.demo-box {
width: 100px;
height: 100px;
background: #3498db;
margin: 20px 0;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.btn {
background: #3498db;
color: white;
border: none;
padding: 8px 15px;
margin: 5px;
border-radius: 3px;
cursor: pointer;
transition: background 0.3s;
}
.btn:hover {
background: #2980b9;
}
.code-block {
background: #f8f8f8;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
}
.note {
background: #fffde7;
padding: 10px;
border-left: 3px solid #ffd600;
margin: 10px 0;
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #7f8c8d;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery常见动画效果实现介绍</h1>

<p>jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。下面介绍jQuery中常见的动画效果实现方法。</p>

<h2>1. 显示和隐藏效果</h2>

<div class="demo-box" id="demo1">演示元素</div>
<button class="btn" id="showBtn">显示</button>
<button class="btn" id="hideBtn">隐藏</button>
<button class="btn" id="toggleBtn">切换</button>

<div class="code-block">
<pre><code>// 显示效果
$("#showBtn").click(function(){
$("#demo1").show();
});

// 隐藏效果
$("#hideBtn").click(function(){
$("#demo1").hide();
});

// 切换显示/隐藏
$("#toggleBtn").click(function(){
$("#demo1").toggle();
});</code></pre>
</div>

<h2>2. 淡入淡出效果</h2>

<div class="demo-box" id="demo2">演示元素</div>
<button class="btn" id="fadeInBtn">淡入</button>
<button class="btn" id="fadeOutBtn">淡出</button>
<button class="btn" id="fadeToggleBtn">切换</button>
<button class="btn" id="fadeToBtn">淡入到0.5</button>

<div class="code-block">
<pre><code>// 淡入效果
$("#fadeInBtn").click(function(){
$("#demo2").fadeIn();
});

// 淡出效果
$("#fadeOutBtn").click(function(){
$("#demo2").fadeOut();
});

// 切换淡入/淡出
$("#fadeToggleBtn").click(function(){
$("#demo2").fadeToggle();
});

// 淡入到指定透明度
$("#fadeToBtn").click(function(){
$("#demo2").fadeTo("slow", 0.5);
});</code></pre>
</div>

<h2>3. 滑动效果</h2>

<div class="demo-box" id="demo3">演示元素</div>
<button class="btn" id="slideDownBtn">下滑</button>
<button class="btn" id="slideUpBtn">上滑</button>
<button class="btn" id="slideToggleBtn">切换</button>

<div class="code-block">
<pre><code>// 下滑效果
$("#slideDownBtn").click(function(){
$("#demo3").slideDown();
});

// 上滑效果
$("#slideUpBtn").click(function(){
$("#demo3").slideUp();
});

// 切换滑动效果
$("#slideToggleBtn").click(function(){
$("#demo3").slideToggle();
});</code></pre>
</div>

<h2>4. 自定义动画</h2>

<div class="demo-box" id="demo4">演示元素</div>
<button class="btn" id="animateBtn1">移动和变大</button>
<button class="btn" id="animateBtn2">颜色和旋转</button>
<button class="btn" id="stopBtn">停止动画</button>

<div class="code-block">
<pre><code>// 移动和改变大小
$("#animateBtn1").click(function(){
$("#demo4").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
}, 1000);
});

// 颜色变化和旋转(需要jQuery UI支持颜色动画)
$("#animateBtn2").click(function(){
$("#demo4").animate({
backgroundColor: '#e74c3c',
color: '#fff'
}, 1000);

// 旋转动画
$("#demo4").animate({
rotate: '360deg'
}, 1000, function() {
$(this).css('rotate', '0deg');
});
});

// 停止动画
$("#stopBtn").click(function(){
$("#demo4").stop();
});</code></pre>
</div>

<div class="note">
<strong>注意：</strong>颜色动画和旋转动画需要jQuery UI或其他插件支持，基础jQuery库不支持这些属性的动画。
</div>

<h2>5. 链式动画</h2>

<div class="demo-box" id="demo5">演示元素</div>
<button class="btn" id="chainBtn">执行链式动画</button>

<div class="code-block">
<pre><code>// 链式动画
$("#chainBtn").click(function(){
$("#demo5")
.animate({left: '100px'}, 500)
.animate({top: '50px'}, 500)
.animate({left: '0'}, 500)
.animate({top: '0'}, 500);
});</code></pre>
</div>

<h2>6. 回调函数</h2>

<div class="demo-box" id="demo6">演示元素</div>
<button class="btn" id="callbackBtn">执行动画</button>

<div class="code-block">
<pre><code>// 动画完成后的回调函数
$("#callbackBtn").click(function(){
$("#demo6").animate({
left: '200px',
opacity: '0.5'
}, 1000, function(){
// 动画完成后执行的代码
alert("动画完成!");
$(this).css("background", "#2ecc71");
});
});</code></pre>
</div>

<div class="footer">

</div>
</div>