jQueryで文字色を少しずつ変化

animateを使って色を変更

animateで色を変更

jQueryだけでは色は変化しないので、jQuery UIを使用。

jQuery

$(function () { // デフォルト色を取得 var default_color = $('#side').css('color'); $('#main').hover(function() { // 徐々に色が変化 $('#side').animate({ 'color' : '#2a61fe' }, 'slow'); }, function(){ // 元に戻す $('#side').css('color', default_color); }); });

colorだけでなく、background-color、border-colorなどもjQuery UIを使うことで対応可。

サンプル

fadeToで透過

濃淡を変更するだけであればfadeToで代用可。この場合、jQuery UIは不要。

jQuery

$(function () { $('#main').hover(function() { // 徐々に透過 $('#side').fadeTo('slow', 0.3); }, function(){ // 元に戻す $('#side').css('opacity', 1); }); });

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。