【Javascript】animateメソッドが適用できないプロパティをプラグインを使ってアニメーションさせる | Wood-Roots:blog

2013
05/07

animateメソッドが適用できないプロパティをプラグインを使ってアニメーションさせる

jQueryのanimateメソッドはwidth,height,left,topなどをアニメーションさせることができますが、box-shadowやbackground-position、colorなどアニメーションさせることができないプロパティも多くあります。
※値として単一の数値を取らないプロパティはアニメーションさせることができません。

jQuery単独ではアニメーションさせることができないプロパティでも、プラグインを使用することでanimateメソッドとまったく同じ文法でアニメーションを実装することができます。

中でもアニメーション効果を与えることで簡単にリッチな表現が可能となるbox-shadow、background-postion,background-color,colorの各プロパティをアニメーションさせる方法とプラグインを紹介します。

DEMO

ADs

共通

何はなくともjQueryを読み込みます。DEMOでは1.9を使いましたが1.8でも問題ありません。

1
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

box-shadowをアニメーションする

Shadow animation jQuery pluginを使います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript" src="jquery.animate-shadow.js"></script>
 
<script type="text/javascript">
(function($){
$(function(){
//box-shadow用
//box-shadow非対応のIE8以下では効果がありません。
$('.boxShadow').on({
'mouseenter': function(){
$(this).animate({
boxShadow: '0 0 10px #f00'
});
},
'mouseleave': function(){
$(this).animate({
boxShadow: '0 0 5px #0cf'
});
}
});
});
})(jQuery);
</script>

background-positionをアニメーションする

jQuery Background Positionを使います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="jquery.animate-shadow.js"></script>
 
<script type="text/javascript">
(function($){
$(function(){
//background-position用
$('.backgroundPosition').on({
'mouseenter': function(){
$(this).animate({
backgroundPosition: '-200px 0'
});
},
'mouseleave': function(){
$(this).animate({
backgroundPosition: '0 0'
});
}
});
});
})(jQuery);
</script>

background-color、colorをアニメーションする

jQueryUIを使います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
<script type="text/javascript">
(function($){
$(function(){
//background-color用
$('.backgroundColor').on({
'mouseenter': function(){
$(this).animate({
backgroundColor: '#f0f'
});
},
'mouseleave': function(){
$(this).animate({
backgroundColor: '#0f0'
});
}
});
 
//color用
$('.color').on({
'mouseenter': function(){
$(this).animate({
color: '#0ff'
});
},
'mouseleave': function(){
$(this).animate({
color: '#f00'
});
}
});
});
})(jQuery);
</script>

いずれも通常のanimateメソッドと同様の連想配列ですので、難しい点はほとんどないと思います。
（DEMOでは省略していますがeasingやコールバックも使えます）

簡単に実装できますが閲覧者に対するインパクトが大きい効果だと思いますので、ぜひ試してみてください。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social