jQuery Academy · 课时

jQuery 与动画

Q: 「jQuery 与动画」这节课中我会学到什么？

jQuery 与动画 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

jQuery 与动画 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 1 节课，共 1 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。

简介

您好，

本节中，我们将学习使用 jQuery 制作动画。

让我们开始吧。

show - hide 方法

show() 和 hide() 方法

我们可以使用 show 和 hide 方法在屏幕上显示和隐藏 DOM 对象。

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show</button>	
<button id="hide">Hide</button>	

<script>
/*
hide method hides target 
element from DOM.
*/
$('#hide').on('click', function(){
   $('#target').hide();
})

/*
show method shows the 
target element in the DOM.
*/
$('#show').on('click', function(){
  $('#target').show();
});

</script>

toggle 方法

toggle() 方法

除此之外，还有一个 toggle() 方法，从名称就可以猜到它的作用。使用此方法时，如果元素处于隐藏状态，就会显示；如果处于显示状态，就会隐藏。

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Toggle</button>	

<script>
/*
toggle() method shows or hides the 
target element in the DOM.
*/
$('#toggle').on('click', function(){
  $('#target').toggle();
});
</script>

fadeIn 和 fadeOut

fadeIn() 和 fadeOut() 方法

现在，让我们看看可以通过动画显示和隐藏 HTML 元素的 fadeIn 和 fadeOut 方法。

fadeIn 和 fadeOut 方法可以接收一个可选的毫秒数值。该值决定动画持续多少毫秒。如果不传入参数，则使用默认值。

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show with Animation</button>	
<button id="hide">Hide with Animation</button>	

<script>
/*
fadeOut method hides target 
element from DOM with Animation
*/
$('#hide').on('click', function(){
   $('#target').fadeOut();
})

/*
fadeIn method shows the 
target element in the DOM with Animation
*/
$('#show').on('click', function(){
  $('#target').fadeIn();
});

</script>

淡入和淡出

fadeOut 会在一段时间内降低元素的不透明度。当不透明度变为 0 时，display 属性会变为 none。

它是我们上面学习过的 hide() 方法的动画版本，只是增加了不透明度动画。

FadeIn 与 fadeOut 方法相反。

fadeToggle 方法

fadeToggle() 方法

fadeToggle() 方法与 toggle() 方法类似。如果元素处于隐藏状态，它就会显示；如果处于显示状态，它就会隐藏，而且正如您所想，它会通过动画完成这一过程。

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Fade Toggle</button>	

<script>
/*
fadeToggle() method shows or hides the 
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
  $('#target').fadeToggle();
});
</script>

CSS 动画

jQuery 中的动画通过 animate() 方法执行。此方法内部接收一个 JSON 参数，在这个 JSON 中，我们定义目标元素的哪些 CSS 属性将发生变化。

第二个参数是动画时间，单位为毫秒（此参数可选）。

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000);
</script>

动画事件处理程序

我们可以为 animate 方法指定的最后一个参数是事件处理程序，动画结束时可以运行该处理程序。

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000, 
   function(){
    alert('animation is completed')
});
</script>

相对动画

我们再介绍一下动画中的一个小便利。

动画中使用的属性可以被赋予相对值，而不必传入绝对值。

通过下面的示例，我们可以更清楚地理解这一点。

动画过程中，相关目标元素的 top 属性增加了 100px。

$("button").animate({            
            top: "+=100px",
        });

停止动画

要停止当前正在运行的动画，只需选中定义了该动画的目标，并使用 stop() 方法。

const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();

预设动画

我们可以在 jQuery 中定义自定义 CSS 属性来创建动画，也可以使用 jQuery 提供的预设方法。

来吧，让我们研究下面的代码。

//showing by slide up animation.
console.log("slideUp animation on div elements");

//hiding by slide up animation.
console.log("slideUp animation on div elements");

/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");

相对动画时长

与其他动画方法一样，如果希望在此方法中指定动画时长，就应将其作为第一个参数传入。

// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");

/*
We can also use a relative 
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");

事件处理程序

关于滑动动画，我最后还要说明一件事。嗯，我好像忘了。

与 animate 方法类似（用于定义动画完成时运行的事件处理程序），我们也可以将匿名函数作为第二个参数传给上面的方法。

setTimeout(function() {
	//Call when animation is completed
}, 1000);

恭喜

恭喜您 🎉

我们学习了 jQuery 和动画。

下一节中，我们将学习 AJAX 操作。

常见问题解答

「jQuery 与动画」课时是免费的吗？

是的 — 「jQuery 与动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。

「jQuery 与动画」这节课中我会学到什么？

jQuery 与动画你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 1 节。

「jQuery 与动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

← 返回 jQuery Academy