jQuery入門 - アニメーション
アニメーション
jQueryを使って様々なアニメーション効果を実装する方法を学びます。
タスク
フェード効果
fadeIn()とfadeOut()メソッドを使って要素のフェード効果を実装します
スライド効果
slideDown()とslideUp()メソッドを使って要素のスライド効果を実装します
カスタムアニメーション
animate()メソッドを使って要素のカスタムアニメーションを実装します
ヒント
jQueryのアニメーションメソッドを使って要素の動きを制御しましょう。
参考コード
$(document).ready(function() {
// 1. フェード効果
$('#fade-in').click(function() {
$('#fade-box').fadeIn(1000, function() {
$('#fade-log').text('フェードイン完了: ' + new Date().toLocaleTimeString());
});
});
$('#fade-out').click(function() {
$('#fade-box').fadeOut(1000, function() {
$('#fade-log').text('フェードアウト完了: ' + new Date().toLocaleTimeString());
});
});
// 2. スライド効果
$('#slide-down').click(function() {
$('#slide-box').slideDown(1000, function() {
$('#slide-log').text('スライドダウン完了: ' + new Date().toLocaleTimeString());
});
});
$('#slide-up').click(function() {
$('#slide-box').slideUp(1000, function() {
$('#slide-log').text('スライドアップ完了: ' + new Date().toLocaleTimeString());
});
});
// 3. カスタムアニメーション
$('#animate').click(function() {
$('#animate-box').animate({
left: '200px',
opacity: 0.5,
width: '200px',
height: '200px'
}, 1000, function() {
$('#animate-log').text('アニメーション完了: ' + new Date().toLocaleTimeString());
});
});
});