10-11-20
文字色や背景色をじんわり変える「Jquery Color Plugin」
demo
memo
作業内容
文字色や背景色などを指定した色にじんわりとアニメーションで変更させるJquery Color Pluginを試してみます。今回はhoverで発動、stop()でアニメーション中のhoverはノーカウントにしてます。
--- javascript ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/101120/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 背景色を変える
$(".first a").hover(function() {
$(this).stop().animate({ backgroundColor: "#ffcc00" }, 400);
},function() {
$(this).stop().animate({ backgroundColor: "#ffffff" }, 800);
});
// 文字色を変える
$(".second a").hover(function() {
$(this).stop().animate({ color: "#333333" }, 'fast');
},function() {
$(this).stop().animate({ color: "#2C95D7" }, 'slow');
});
});
</script>--- html ---
<ul class="first">
<li><a href="#">hoverで背景色を#FFCC00にじんわり変えます。</a></li>
<li><a href="#">で、マウスを外せば背景色を#FFFFFFにじんわり戻します。</a></li>
</ul>
<ul class="second">
<li><a href="#">hoverで文字色を#333333にさっと変えます。</a></li>
<li><a href="#">で、マウスを外せば文字色を#2C95D7にじんわり戻します。</a></li>
</ul>