jQueryに関して、まったくの初心者です。
いろんなサイトで紹介されてるライブラリとか使わせてもらって、なんとか形にはしてますけど、実は「jQueryってなにそれおいしいの？」状態の人です。
このままじゃなんとなくイヤだなーとか思ったので、とりあえず汎用性のあって簡単そうなやつをひとつ、他サイトを参考にして自分で作って見ました。
フェードするロールオーバー
ロールオーバーしたときに、ふわっとフェードするものです。
以下覚書。
1.まずは本家サイトからjQueryをとってこよう。
2.とってきたら<head>要素内で読み込ませよう
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>3.次にコードを書いていこう。（JavaScriptファイル作ってもいいし、そのファイル内でもよし）
jQuery(function($){
$('#s1 img')
.hover(function(){
$(this).animate({
opacity: .5
},{
duration: 300
})
},function(){
$(this).animate({
opacity: 1
},{
duration: 300
})
});
});4. htmlを書きかき。
<div>
<div id="s1">
<img src="./image/_1_bigger.gif" alt="" />
<img src="./image/yoshida_bigger _1.jpg" alt="" />
<img src="./image/1_bigger.jpg" alt="" />
<img src="./image/yoshida_bigger.jpg" alt="" />
</div>
</div>
こんな感じかと。
「$('#s1 img')」っていうところが、要は<div id="s1">の中の<img>が対象っていう指定をして、「.hover(function()」っていうのが、ホバーしたときにエフェクトかけるよっていうことなんだろうな。その後の「.animate」っていうのが具体的なエフェクトの指定で、「opacity」が透明度、「duration」がエフェクトがかかるまでの時間なんだろうと推測。
慣れてないから難しい印象なんだけど、慣れると簡単そう。CSS書く感じにもちょっと似てる？もし間違ってたらご指摘いただければ幸いです。
参考にさせていただいたのは以下のサイト
マウスホバーでスムーズにjQueryのアニメーションをコントロールする方法
はじめてのjQuery
40分で覚えるjQuery速習講座
感謝です。
あと、twitterのアイコンをつかわせていただいた@haruirukaにも感謝。無許可ですがなにか？
0 件のコメント:
コメントを投稿