yuga.jsのロールオーバーをフェードインで表示

締切済

質問者：moon333
質問日時：2013/02/05 18:25
回答数：1件

yuga.js 0.7.2を使用しています。

ロールオーバーさせる時に、
フェードアウト→フェードインで画像の切り替え表示をしたいと思っています。

もし分かる方がいましたら、そのコードを教えて頂けますでしょうか。
可能であれば、
yuga.js本体には追記しない方法（別途common.js等に記述）があればと思います。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2013/02/06 20:03

yuga.jsはまったく知りませんが、jQueryベースみたいなのでjQueryでのサンプルです。

方法はいろいろあると思いますので、一例です。
　*　class="fade"の画像が対象。
　*　画像の拡張子はとりあえず.jpg .gif .pngの3種類にしてあります。
　*　速度はデフォルトになっているので、適当に設定しなおしてください。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
</head>
<body>

<p><img src="A.jpg" alt="" class="fade">
<p><img src="B.jpg" alt="" class="fade">
<p><img src="C.jpg" alt="" class="fade">

<script type="text/javascript">
(function(){
　$("img.fade").hover(
　　function(){ fade.call(this, 1); },
　　function(){ fade.call(this, 0); }
　);

　function fade(c){
　　var obj = $(this);
　　var src = obj.attr("src");

　　obj.stop().animate({opacity: 0}, function(){
　　　src = src.replace(/_on\.(jpg|gif|png)$/, "\.$1");
　　　if(c) src = src.replace(/\.(jpg|gif|png)$/,"_on\.$1");
　　　obj.attr("src", src).animate({opacity: 1});
　　});
　}
})();
</script>
</body>
</html>