jQueryアニメーション
jQueryアニメーション
jQueryの基本的なアニメーション効果の実装方法を学びます。
タスク
フェードイン/アウト
jQueryのフェードイン/アウトを実装します
スライド
jQueryのスライドを実装します
アニメーション
jQueryのアニメーションを実装します
ヒント
jQueryのアニメーションの基本的な使い方を理解しましょう。
参考コード
$(function() {
// フェードイン/アウト
$('#fade-in').click(function() {
$('#fade-box').fadeIn(1000);
});
$('#fade-out').click(function() {
$('#fade-box').fadeOut(1000);
});
// スライド
$('#slide-down').click(function() {
$('#slide-box').slideDown(1000);
});
$('#slide-up').click(function() {
$('#slide-box').slideUp(1000);
});
// アニメーション
$('#animate').click(function() {
$('#animate-box').animate({
left: '200px',
opacity: 0.5,
height: '150px',
width: '150px'
}, 1000);
});
});