画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのスクリプト
JavaScriptを使ったロールオーバーって大体imgにクラス名を追加するだけで出来るタイプが多いですよね。同じ感じでアニメーションロールオーバーも出来たらいいよね！って思って作りました。きっと同じ様に思っている人もたくさんいるはずだし。。。まー、ソースも綺麗じゃないし、バグだってあるかもしませんが、きっと誰かが素敵に書き換えてくれるでしょう。既にあるかもですが・・・。
※プラグイン化したものを公開していますのでよろしければ画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグインをご覧下さい。
必要なファイル
対応ブラウザ
- Google Chrome
- Safari4~
- Firefox3~
- Internet Explorer6~
- Opera11
※Windowsのみの確認です。
コーディング＆設定
HTML
HTMLヘッダー内でjquery.jsを読み込む。
<script src="jquery.js" type="text/javascript"></script>
ロールオーバーさせるimgにclassを設定します。
<img src="sample1.gif" class="rollover"> <img src="sample2.gif" class="rollover"> <img src="sample3.gif" class="rollover">
ファイル名
ロールオーバー用画像（形式はなんでもOK）を用意し、ロールオーバー前の画像ファイル名の最後に_ovを追加する。その画像をロールオーバー前の画像と同じフォルダに入れる。
（例）ロールオーバー前の画像がsample.gifならsample_ov.gifというファイル名にする。
JavaScript
アニメーションの種類により下記から選んで記述。
※2012/2/15 「7.下からスライド」と「8.右からスライド」を追加しました。
1.フェード
$(function(){
function imgOvAnimeFade(){
var ovClass = "rollover", //ロールオーバーする要素のクラス名
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovImg = "ovImg",
speed = 500; //アニメーションの速度
//classがrolloverのimg要素に対しての処理
$("img."+ovClass).each(function(){
var self = $(this),
url = self.attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElmLen(){ //ロールオーバー画像表示確認関数
return self.prev("img."+ovImg).length;
}
//ホバーイベント
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({position:"relative"}).before("<img style='position:absolute;' class='"+ovImg+"' src='"+url+"' alt='' />");
}
self.stop().animate({opacity:"0"},speed);
}
},
function(){
if(ovElmLen()){
self.stop().animate({opacity:"1"},speed,function(){
self.css({position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",url);
});
});
}
imgOvAnimeFade();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
※2012/2/15 上記スクリプトの記述を変更しました。
2.上からスライド
$(function(){
function imgOvAnimeSlideTop(){
var ovClass = "rollover",
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovRrap = "ovRrap",
ovImg = "ovImg",
speed = 500; //アニメーションの速度
$("img."+ovClass).each(function(){ //classがrolloverのimg要素に対しての処理
var self = $(this),
urlDef = self.attr("src"),
urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElm(){
return self.prev("span."+ovImg);
}
function ovElmLen(){ //ロールオーバー画像表示確認関数
return ovElm().length;
}
function w(){
return self.width()+"px";
}
function h(){
return self.height()+"px";
}
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({opacity:"0",position:"relative"})
.before("<img style='position:absolute;' class='"+ovImg+"' src='"+urlDef+"' alt='' />")
.before("<span style='width:"+w()+";height:0;background-image:url("+urlChange+");position:absolute;' class='"+ovImg+"'></span>");
}
ovElm().stop().animate({height:h()},speed);
}
},
function(){
if(ovElmLen()){
ovElm().stop().animate({height:"0"},speed,function(){
self.css({opacity:"1",position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",urlChange);
});
});
}
imgOvAnimeSlideTop();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
※2012/2/15 上記スクリプトの記述を変更しました。
3.左からスライド
$(function(){
function imgOvAnimeSlideLeft(){
var ovClass = "rollover",
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovRrap = "ovRrap",
ovImg = "ovImg",
speed = 500; //アニメーションの速度
$("img."+ovClass).each(function(){ //classがrolloverのimg要素に対しての処理
var self = $(this),
urlDef = self.attr("src"),
urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElm(){
return self.prev("span."+ovImg);
}
function ovElmLen(){ //ロールオーバー画像表示確認関数
return ovElm().length;
}
function w(){
return self.width()+"px";
}
function h(){
return self.height()+"px";
}
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({opacity:"0",position:"relative"})
.before("<img style='position:absolute;' class='"+ovImg+"' src='"+urlDef+"' alt='' />")
.before("<span style='display:inline;width:0;height:"+h()+";background-image:url("+urlChange+");position:absolute;' class='"+ovImg+"'></span>");
}
ovElm().stop().animate({width:w()},speed);
}
},
function(){
if(ovElmLen()){
ovElm().stop().animate({width:"0"},speed,function(){
self.css({opacity:"1",position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",urlChange);
});
});
}
imgOvAnimeSlideLeft();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
※2012/2/15 上記スクリプトの記述を変更しました。
4.フェードしながら上からスライド
$(function(){
function imgOvAnimeFadeSlideTop(){
var ovClass = "rollover",
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovRrap = "ovRrap",
ovImg = "ovImg",
speed = 500; //アニメーションの速度
$("img."+ovClass).each(function(){ //classがrolloverのimg要素に対しての処理
var self = $(this),
urlDef = self.attr("src"),
urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElm(){
return self.prev("span."+ovImg);
}
function ovElmLen(){ //ロールオーバー画像表示確認関数
return ovElm().length;
}
function w(){
return self.width()+"px";
}
function h(){
return self.height()+"px";
}
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({opacity:"0",position:"relative"})
.before("<img style='position:absolute;' class='"+ovImg+"' src='"+urlDef+"' alt='' />")
.before("<span style='display:inline;width:"+w()+";height:0;background-image:url("+urlChange+");position:absolute;' class='"+ovImg+"'></span>");
ovElm().css({opacity:"0"});
}
ovElm().stop().animate({height:h(),opacity:"1"},speed);
}
},
function(){
if(ovElmLen()){
ovElm().stop().animate({height:"0",opacity:"0"},speed,function(){
self.css({opacity:"1",position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",urlChange);
});
});
}
imgOvAnimeFadeSlideTop();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
※2012/2/15 上記スクリプトの記述を変更しました。
5.オフ画像が上にスライドしながら、オン画像が上からスライド
$(function(){
function imgOvAnimeSlideTop2(){
var ovClass = "rollover",
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovRrap = "ovRrap",
ovImg = "ovImg",
speed = 500; //アニメーションの速度
$("img."+ovClass).each(function(){ //classがrolloverのimg要素に対しての処理
var self = $(this),
urlDef = self.attr("src"),
urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElm(){
return self.prev("span."+ovImg);
}
function ovElmLen(){ //ロールオーバー画像表示確認関数
return ovElm().length;
}
function w(){
return self.width()+"px";
}
function h(){
return self.height()+"px";
}
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({opacity:"0",position:"relative"})
.before("<span style='display:inline;width:"+w()+";height:"+h()+";background-image:url("+urlDef+");position:absolute;' class='"+ovImg+"'></span>")
.before("<span style='display:inline;width:"+w()+";height:0;background-image:url("+urlChange+");position:absolute;' class='"+ovImg+"'></span>");
}
ovElm().stop().animate({height:h()},speed)
.prev("span."+ovImg).stop().animate({height:"0"},speed);
}
},
function(){
if(ovElmLen()){
ovElm().stop().animate({height:"0"},speed)
.prev("span."+ovImg).stop().animate({height:h()},speed,function(){
self.css({opacity:"1",position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",urlChange);
});
});
}
imgOvAnimeSlideTop2();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
※2012/2/15 上記スクリプトの記述を変更しました。
6.フェードしながら拡大縮小
$(function(){
function imgOvAnimeFadeSizing(){
var ovClass = "rollover",
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovRrap = "ovRrap",
ovImg = "ovImg",
speed = 500; //アニメーションの速度
$("img."+ovClass).each(function(){ //classがrolloverのimg要素に対しての処理
var self = $(this),
urlDef = self.attr("src"),
urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElm(){
return self.prev("span."+ovImg);
}
function ovElmLen(){ //ロールオーバー画像表示確認関数
return ovElm().length;
}
function w(){
return self.width()+"px";
}
function h(){
return self.height()+"px";
}
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({opacity:"0",position:"relative"})
.before("<span style='display:inline;width:"+w()+";height:"+h()+";background-image:url("+urlDef+");position:absolute;' class='"+ovImg+"'></span>")
.before("<span style='display:inline;width:0;height:0;background-image:url("+urlChange+");position:absolute;' class='"+ovImg+"'></span>");
ovElm().css({opacity:"0"});
}
ovElm().stop().animate({width:w(),height:h(),opacity:"1"},speed)
.prev("span."+ovImg).stop().animate({width:"0",height:"0",opacity:"0"},speed);
}
},
function(){
if(ovElmLen()){
ovElm().stop().animate({width:"0",height:"0",opacity:"0"},speed)
.prev("span."+ovImg).stop().animate({width:w(),height:h(),opacity:"1"},speed,function(){
self.css({opacity:"1",position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",urlChange);
});
});
}
imgOvAnimeFadeSizing();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
※2012/2/15 上記スクリプトの記述を変更しました。
7.下からスライド
$(function(){
function imgOvAnimeSlideBottom(){
var ovClass = "rollover",
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovRrap = "ovRrap",
ovImg = "ovImg",
speed = 500; //アニメーションの速度
$("img."+ovClass).each(function(){ //classがrolloverのimg要素に対しての処理
var self = $(this),
urlDef = self.attr("src"),
urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElm(){
return self.prev("span."+ovImg);
}
function ovElmLen(){ //ロールオーバー画像表示確認関数
return ovElm().length;
}
function w(){
return self.width()+"px";
}
function h(){
return self.height()+"px";
}
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({opacity:"0",position:"relative"})
.before("<img style='position:absolute;' class='"+ovImg+"' src='"+urlChange+"' alt='' />")
.before("<span style='width:"+w()+";height:"+h()+";background-image:url("+urlDef+");position:absolute;' class='"+ovImg+"'></span>");
}
ovElm().stop().animate({height:"0"},speed);
}
},
function(){
if(ovElmLen()){
ovElm().stop().animate({height:h()},speed,function(){
self.css({opacity:"1",position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",urlChange);
});
});
}
imgOvAnimeSlideBottom();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
8.右からスライド
$(function(){
function imgOvAnimeSlideRight(){
var ovClass = "rollover",
ovStr = "_ov", //ロールオーバー後の画像に追加する文字列
ovRrap = "ovRrap",
ovImg = "ovImg",
speed = 500; //アニメーションの速度
$("img."+ovClass).each(function(){ //classがrolloverのimg要素に対しての処理
var self = $(this),
urlDef = self.attr("src"),
urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
function ovElm(){
return self.prev("span."+ovImg);
}
function ovElmLen(){ //ロールオーバー画像表示確認関数
return ovElm().length;
}
function w(){
return self.width()+"px";
}
function h(){
return self.height()+"px";
}
self.hover(
function(){
if(!self.attr("src").match(ovStr+".")){
if(!ovElmLen()){
if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
self.before("<span style='display:inline-block;' class='"+ovImg+"' ></span>");
}
self.css({opacity:"0",position:"relative"})
.before("<img style='position:absolute;' class='"+ovImg+"' src='"+urlChange+"' alt='' />")
.before("<span style='display:inline;width:"+w()+";height:"+h()+";background-image:url("+urlDef+");position:absolute;' class='"+ovImg+"'></span>");
}
ovElm().stop().animate({width:"0"},speed);
}
},
function(){
if(ovElmLen()){
ovElm().stop().animate({width:w()},speed,function(){
self.css({opacity:"1",position:"static"})
.prevAll("."+ovImg).remove();
});
}
})
.each(function(){ //プリロード設定
$("<img>").attr("src",urlChange);
});
});
}
imgOvAnimeSlideRight();
});
※2012/8/10 エラーが起きていましたので上記スクリプトを修正しました。
解説
ホバー時に画像や背景画像もつ要素を追加し下に重ねて、一番上の元画像はopacityで透明にし要素を残しつつそれぞれをアニメーションさせます。元画像の要素が消えるとホバー状態ではなくってしまいますので。
あとがき
複数同時に使えるようにスクリプトを1つにまとめようかと思いましたが、出来るか分からないし、重くなりそうだし、めんどいし。ってことでやめました。まー、2種類同時使うことは稀だと思いますしね。
jquery.bgpos.jsを使いbackground-positionをアニメーションさせると違った動きもできます。今回の記事では使っていませんがね。気が向いたらそっちも記事にするかもです。
兎にも角にも、コレ作ってる間Operaちゃんのバグに悩まされた日々でしたとさ。
Comment
こんにちは！
早速活用させて頂きました！ありがとうございます。
なお、バグってほどではないですが、imgタグにcssでfloatを指定しているとオンマウス時の画像が正しい位置に表示されないようです。
念のためご報告までに。
ありがとうございました！
うみんちゅ さん、こんにちわ。
活用して頂きうれしいしだいです。
floatでオンマウス時の画像が正しい位置に表示されないとのこと、ご指摘ありがとう御座います。
今後イロイロ修正しようかと思っていますので、その際に直せたらと思います。
ネットでロールオーバーのアニメーションがないかな？と思ったときたどりつきました。
とても使いやすくて、利用させて頂きます。
ちょっとご質問なのですが、下からアニメーションさせたい場合の
パラメーター変更の仕方をよければ教えて頂けたらうれしいです。
caramelさん。はじめまして。
下からアニメーションさせる場合についてですが、タイトルの通りクラス名追加だけで行うことを前提にお話します。
この場合は少しの変更で無理やり出来なことは無いのですが、動きがガタガタとしてしまうので別の方法で行いたいと思います。
「jquery.bgpos.js」を使用したいと思います。ただ、自分の見つけた最新バージョン（1.02）の「jquery.bgpos.js」だと「jQuery.js」の最新バージョン（1.7.1）を使用した場合Internet Explorerでエラーが出てしまいました。
ですので「jquery.bgpos.js」を少し改変しています。
以下がデモとJavaScriptです。（アニメーションの仕方が少し変わっています。）
DEMO
jquery.bgpos.js
画像にクラス名を追加するだけでロールオーバーを実現するjQueryのスクリプト
ついでにプラグイン化していますので、外部JavaScript内またはhead内に以下を記述して下さい。
jQuery(function($){
$(“ロールオーバーする要素につけるクラス名”).imgOvAnime({type: {on: “”, out: “”}});
});
大雑把に説明していますので、不明な点がありましたらまたご連絡ください。
あと、ココまで書いて気づいたことなのですが、「jquery.bgpos.js」を追加しなくてもできそうな方法が浮かんできました。
どうしても「jquery.bgpos.js」を追加したくない、アニメーションは変えたくないという場合は、ご連絡頂ければ試してみます。
あぁ、なんだかすぐすぐ対応して頂き、
しかも丁寧な対応をして頂いて申し訳ないです!!
早速使ってみたのですが、微妙に前回と動きが違うのですね。
あの、、前回の動きで下からは可能でしょうか？
なんだかいろいろ要望が多くてすいません、、T-T
沖縄でwebのお仕事すごいですね、自分は東京なのですが、
いずれは地方でwebの仕事できたらいいなぁと思っています。
jquery.bgpos.jsもできればない方ですと、非常に助かったりしますT-T
caramelさん。
記事内に「下からスライド」バージョンを追加しましたのでお試しください。
東京ですか。イロイロ勉強出来そうでいいですねぇ。
沖縄はセミナーとかが乏しくて悲しいです。
ありがとうございます！ちょっと試してみます。
ちなみにFirefoxの5.01ではdemoが動作してなかったみたいです。
safariは動作してました。取り急ぎです。
沖縄はそうですよね、、紙とのハイブリッドのデザイナーなので、技術的な部分についてはまだまだ未熟で、、助けて頂いてますT-T
あ、ちなみにMac環境です。前回は動作してました。
たびたびすいません、DEMO環境のみ動作しないようです。
私の方のローカルでは、safari、firefoxともに動作しました。
caramelさん。
MacだとDEMO動かないんですか。ご連絡ありがとうございます。
でも残念ながらMac環境で確認が出来ないんですよねぇ。
一応Windowsで確認すると動いたんですけど。
とりあえず動作したみたいで良かったです。
いえいえ、ありがとうございます。ローカルのMac環境では動いているので
多分大きな問題ではないかと思います。あ、DEMOはsafariは動いているので、
何なんでしょうかね、、でもこちらでは使えてるのでありがとうございます＾＾
こういうの探してたのです！凄くいいです。
できれば１つだけお願いしたいことがあるのですが…
画像のタグにクラス名を個別につけるのではなく、ULなどの大本にクラスをつければ済むように改造して頂けると嬉しいです。
ぜひ検討してください。お願いしますm(_ _)m
akiさん。
コメントありがとうございます。
img以外の要素にクラスをつけたい場合ですね。
akiさんコメントの例ならば以下のような感じになるかと思います。
——————————
$(“img.”+ovClass)
——————————
↓上記の記述を以下に変更
——————————
$(“ul.”+ovClass).find(“img”)
——————————
試してはいないので、動作しない場合はご連絡ください。
ただ、複数のクラス対して出来るようにはしていませんので、その場合はプラグイン化した方が、便利だと思います。
そのような使い方も必要でしたらご連絡ください。
ありがとうございます。できましたー。
でもやはり複数のクラスに設定できないと不便ですね…
普通のロールオーバーは下記のものを使用しているのですが
http://www.mitsue.co.jp/knowledge/mjl.html
こういう感じでアニメーションロールオーバーは可能でしょうか？
何度も申し訳ありません。
よろしくお願い致しますm(_ _)m
akiさん。
複数のidやclassに設定する場合、ある程度ならカンマ区切りで同時指定も可能ですが、やはりプラグイン化した方が便利ですね。
一応以下ページに以前プラグイン化したモノがあります。
画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグイン
ただ、アニメーションの種類を全部をまとめちゃってるので、複数種類のアニメーションを使わない場合は必要ない記述が多くなり、多少だと思いますが重くなると思います。
ですので、以下に個別に分けたJSファイルを用意しています。
jquery.imagerolloveranime_separate_not-ranning.js
必要なアニメーションの箇所以外を削除して使用してください。
あとは、htmlファイル内のheader内で以下の様に実行すると動作します。
——————————
jQuery(function($){
$(‘実行する要素’).imgOvAnimeFade();
});
——————————
※上記はアニメーションが「フェード」の場合です。
アニメーションごとに実行するプラグインの関数名が違いますの気をつけてください。
また実行する要素はカンマ区切りで複数指定も可能です。
全ページ同じ内容でしたらJSファイル内で実行してもイイかと思います。
あとは「ロールオーバー画像の接尾詞」や「アニメーション速度」等のオプションを変更できますが、恐らく全部統一すると思いますので、直接JSファイルを変更した方が早いと思います。
何か不明な点がありましたら、ご連絡ください。
個別に分けたＪＳ読み込んで下記のように記述したのですが動かないですー
何か間違っているのでしょうか…
jQuery(function($){
$(“実行する要素”).imgOvAnimeFade();
});
実行要素とはクラス名のことでしょうか？
それともＵＬ等のことでしょうか？
一応どちらも試したのですが動きませんでした…
akiさん。
実行する要素は最後がimg要素に対して実行されていれば、あとはid名でもclass名でもタグでも問題は無いと思います。
例えば ul#sample > li > a > img の様なツリー構造の場合なら以下の様に記述します。
——————————
jQuery(function($){
$(‘#sample img’).imgOvAnimeFade();
});
——————————
CSSセレクタの記述と同じです。
ただ、説明は省きますが、実行速度を考えると以下の様に記述したほうがイイかと思います。
——————————
jQuery(function($){
$(‘#sample’).find(‘img’).imgOvAnimeFade();
});
——————————
あと忘れておりましたが、コメントするとクォーテーションマークが全角に変換されてしまいますので、半角にして記述してください。
多分これで大丈夫かと思います。きっと。
ありがとうございます！
下記のように記述したら求めていた通りのクラスrollのみ切り替わるようになりました。
jQuery(function($){
$(“p.roll,ul.roll”).find(“img”).imgOvAnimeFade();
});
本当にありがとうございました。
akiさん。
動作したようで良かったです。
このやり方はjQueryプラグインを使うときの基本的な記述ですので、覚えておくと今後も使えると思います。
はじめまして！
こういうスクリプトを探していて、見つけたときは凄く嬉しかったです！
早速試そうと思ったのですが、動作確認出来なくて…
初歩的だとは思いますが質問してもよろしいでしょうか？
————————–
ファイル名の部分についてで
【ロールオーバー用画像（形式はなんでもOK）を用意し、ロールオーバー前の画像ファイル名の最後に_ovを追加する。その画像をロールオーバー前の画像と同じフォルダに入れる。】
・_ov を付ける画像はロールオーバー後(DEMOでいう赤・青・緑の画像)に付ける、という意味で合っているのでしょうか。
・現在、マウスが触れない場合に表示されている画像(DEMOでいう灰色画像)にhome.gifという名前をつけて
触れたときに表示される画像(DEMOでいう赤・青・緑の画像)にhome_ov.gifという名前をつけています。
・同じファイルに入れるということですがimgフォルダ→naviというフォルダを作り、その中に入れていますが問題はありませんか。
スクリプトをコピーさせていただき、html内に記述させていただきました。
どの要素が邪魔をして実装出来ないかわかりません
何か上記の操作でおかしいところがあれば、教えていただきたいです
長々となりましたが、よろしくお願いします
kasumiさん。
はじめまして。
ファイル名とファイル格納場所については問題無いかと思います。
html内に直接記述したのであれば、そのあたりに問題があるかもしれません。
あとほかにパット思いつくのは、以下ですかね。
1. jQueryの読み込み
2. クラス名の設定
3. 他のJavaScriptとの競合
1と2は大丈夫かと思いますの、可能性は3が高いかと。
どれでも無いかもしれません。
その場合はエラーの起きている箇所を教えてもらえれば、もう少し役に立てるかと思います。
お早い回答ありがとうございます
スクリプトを直接打ち込んでいるのが悪い可能性が大きいと感じております…
あと、他のスクリプトも入れていますのでそれもいけないのですね。
新規のjava scriptを作成し、直接記述しているものを入れ、それも読み込めば実装できそうですね。
保存の際、名前は特に気にしなくてよいのでしょうか？
kasumiさん。
jsファイルの名前はなんでも大丈夫です。
とりあえず、他のJavaScriptをコメントアウトしてみて、動作確認してみると良いか思います。
それで動作しなければ、エラーが起きているのか、それともスクリプト自体が動作していないのかを確かめます。
スクリプト自体が動いていない場合、単純なミスの可能性が高いです。
あとは自分が間違って記述している可能性もありますので、どのアニメーションタイプを使用しているか、全てのブラウザで動かないのか、jQueryのバージョンは何か。を教えて貰えて貰えれば試してみます。
ありがとうございます！
試してみたのですが、どのスクリプトを入れても
60行目にエラーが出てしまいます…
これが原因でしょうか
内に入れるだけではいけないのでしょうか。
jQueryのバージョンは v1.7.1のjquery-1.7.1.min.jsを使用しています。
動作確認をしているのはIEとFirefoxで確認しています。
何ども何どもすみません
kasumiさん。
エラーが出ていましたか。
自分の書いたスクリプトには60行目が無いものもありますので、HTML内の60行目ですかね？
どこがエラーなのか分からないので、内容を教えてもらえると少しは判断出来るかと思います。
中に入れるだけ。とはコピーして貼り付けるだけということでしょうか？
クラス名とロールオーバー画像の接尾詞に変更が無ければ、変更しなくても問題はないはずです。
すみません、文章能力が乏しくて…
60行目というのは、上のスクリプトの【ImgOvAnimeSlideRight();】(例：8.右からスライドの場合)の部分がエラーと言われてしまいました。
内に記述しています
クラス名もファイル名に_ovも付けていますので、原因はそのエラーでしょうか。
kasumiさん。
エラー箇所の連絡ありがとう御座います。
原因がわかりました。
自分の記述ミスです。以下の変更をお願いします。
——————————
ImgOvAnimeSlideRight();
——————————
↓変更
——————————
imgOvAnimeSlideRight();
——————————
関数名の1文字目が大文字になっていました。
以前他の箇所を修正した際に変更するのを忘れていたみたいです。
これで動作するかと思います。
おかげで記述ミスに気づくことが出来ました。
ありがとう御座います。
ありがとうございます
早速記述しましたが、まだその部分にエラー表記が出てしまいました…
記述修正していただいても、エラーが出るということは、やはり私側に原因があるのでしょうか；；
うまくいかず、すみません
kasumiさん。
まだ動きませんか。。。
チョット試してみましたが、コチラでは上手くいきました。
JavaScriptの競合でもないのならば、今のところ思い浮かばないですね～。
とりあえず、必要最低限の内容で動作したファイル一式を以下にアップしていますので、動作するか確認してみて下さい。
http://xfs.jp/DMQNc
もし動作したのであればコードを見比べてみて下さい。
お返事遅くなってすみません
ファイル一式ありがとうございます！
そのまま使用させていただきましたら、こちらでも動きました。
これから、見比べたいと思っています。
ご丁寧な対応ありがとうございました！
kasumiさん
とりあえず動作しましたか。
もしどこも違っていないのなら、もしかして文字コードとかですかね～。
スクリプトは何もおかしくなかったのですが
jquery.jsがうまく動いていなかったようで、いただいたファイル内のものを使用させていただいたら
きちんと動きました！
何どもお手数かけてすみませんでした；；
でもちゃんと動いて感動しています！
kasumiさん。
ちゃんと動作したようで良かったです。
ドコが悪いのか気になってたので、ご連絡もらえて助かりました。
easing.js と競合しました。
http://gsgd.co.uk/sandbox/jquery/easing/
回避策なんてありますでしょうか？
あさまさん。
easing.jsとの競合とのことですが、この記事のスクリプトにeasing.jsを使ってイージングの種類を変えた際に競合が起きたとうことでしょうか？
上記の場合でしたら試してみましたが、競合は起きていませんでした。
Demo
（イージングの種類はすべて「easeOutBounce」にしました。）
easing.jsとの競合であっているのでしょうか？
もしかしたらjQueryのバージョンによる違いもあるかもしれません。
今のところ分かるのこれくらいですので、以下の情報があるともう少し分かるかと思います。
1. 使用しているjQueryのバージョン
2. easing.jsを使用しない場合は動作するのか
3. 他のプラグインやライブライは使用していないのか
宜しくお願いします。