jQueryには、.show("slow")、.hide()、.slideUp()、.slideDown()、.fadeIn()、.fadeOut()などのアニメーションメソッドが用意されています。では、希望するアニメーション効果が利用できない場合はどうすればよいのでしょうか？今日は、jQueryのカスタムメソッドを使ってこの目的を達成する方法を見ていきましょう。
1.fadeToggle()メソッドを実装します。
<script type="text/javascript">
jQuery.fn.fadeToggle1 = function (speed, easing, callback) {
return this.animate({ opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function () {
$("#fadeToggle1").click(function () {
$("#showfadeToggle").fadeToggle1(1000);
});
});
</script>
最終的な結果は、jQuery 1.4.4の新しいメソッドと機能と同じです。 jQuery 1.4.4のメソッドと区別するために、fadeToggle1という名前になっていることに注意してください。
2.slideFadeToggle()メソッドを実装します。
上記の方法と同様に、実装コードは以下の通りです：
jQuery.fn.slideFadeToggle1 = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
[]
スライドフェードトグル
