まさかのコバオWebブログ
イベント
2014.09.05
自分がよく使うイベントメソッドの使い方です。
まずは 「hover」
jQuery(function($){
$(‘.hoge’).hover(function(){
$(this).css({‘opacity’:0.5});},
function(){
$(this).css({‘opacity’:1});
});
});
$(‘.hoge’).hover(function(){
$(this).css({‘opacity’:0.5});},
function(){
$(this).css({‘opacity’:1});
});
});
css
.hoge {
background-color:#0000ff;
color:#ffffff;
text-align:center;
padding:10px;
margin:20px 0;
cursor:pointer;
}
(ここで「cursor:pointer;」にしておくとマウスホバー時に指マークに変わるのでボタンだと認識させたいときは付け加えた方がいいと思います。)
下の<div class=”hoge”>にマウスをのせる(ホバー)と色が半透明(opacity 0.5)に変わると思います。マウスをはずすと元通り(opacity 1)になります。
<div class=”hoge”>
これの応用編でアニメーションさせたいときは
jQuery(function($){
$(‘.hoge2’).hover(function(){
$(this).animate({‘opacity’:0.5});},
function(){
$(this).animate({‘opacity’:1});
});
});
$(‘.hoge2’).hover(function(){
$(this).animate({‘opacity’:0.5});},
function(){
$(this).animate({‘opacity’:1});
});
});
<div class=”hoge2″>
ただこれだとマウスホバー時に何度も繰り返してしまうのでstop()というものを付け加えます。
これでイベント繰返しを防ぎます。
jQuery(function($){
$(‘.hoge3’).hover(function(){
$(this).stop().animate({‘opacity’:0.5});},
function(){
$(this).stop().animate({‘opacity’:1});
});
});
$(‘.hoge3’).hover(function(){
$(this).stop().animate({‘opacity’:0.5});},
function(){
$(this).stop().animate({‘opacity’:1});
});
});
<div class=”hoge3″>
■おそらく役に立つ応用編
– ロールオーバー –
Dreamweaverなんかでやるとなんかよくわかんない関数みたいなのでますがこれを使うと簡単です。
-工事中-