【jQuery】opacity Rollover

マウスオーバーで透明度をトグルする

by tea4two

HTML

<h2>click one and fade others</h2>
<div id="sect1">
    <p>Things taht fade...</p>
    <p>Nothing taht fades...</p>
    <p>Other things taht fades...</p>
</div>
<br />
<div id="sect2">
things that fade... ver.2   
    </div>

JavaScript

$(document).ready(function(){
    //周りの色が薄くなる。
    $("#sect1 p").hover(function () {
        $(this).siblings().fadeTo('fast',0.2);  
    }, function(){  // mouseout 
      $(this).siblings().fadeTo('fast',1.0);
    });
    
    //本人が薄くなる
    $("#sect2").hover(function() {
        $(this).fadeTo('fast',0.5);  
    }, function(){  // mouseout 
      $(this).fadeTo('fast',1.0);
    });
});