てるてるブログ

てるてるぼうずの日常やらお勉強やら

テキストや背景色のアニメーション

Posted on | 4月 22, 2015 | No Comments

jquery

jQuery UIを使ってのテキストや背景色をアニメーションする方法。
CSSでもできるみたいだけど、ブラウザの問題等あるみたいなので……

簡単なマウスオーバーとして使うのに良さそう。
プラグインでも「Jquery Color Plugin」などのプラグインを使ってもいいのかもですけどね。
ちゃちゃっとコード書いちゃった方が楽って時もありますし、それで簡単にできちゃうところがjQueryのいいとこですよね。


まずはヘッダー内にjQueryとjQuery UIを読み込む。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

続いてヘッダー内にjs。

テキストカラーの変化
ボーダーもついでに変化させてます。

$(document).ready(function(){
$('ul#menu li a').not('.here').hover(function () {
$(this).stop().animate(
{'color':'#f46200','border-bottom-color':'#f46200'},500);//変化する色とスピード
},function () {
$(this).stop().animate(
{'color':'#1599A1','border-bottom-color':'#1599A1'},500);//元の色
});

変化させる際に特定の要素以外を操作できる.notを使って固定しておきたい要素に記述。
今いるページのメニューだけ色を変えたい場合とかに便利。

背景色の変化
こちらもとりあえずボーダーカラーも変化させてみたけど、あまり意味はないような気もする…

$(document).ready(function(){
$('.backcolor').hover(function () {
$(this).stop().animate(
{'backgroundColor':'#f46200','border-color':'#1599A1',500);//変化する色とスピード
},function () {
$(this).stop().animate(
{'backgroundColor':'#1599A1','border-color':'#333'},500);//元の色
});

じんわり変わってくのがよいな…と思います。

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin