重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

横並びの画像を3枚時間差でフェードインさせたいです

解決済

  • 質問者：cocoaki
  • 質問日時：
  • 回答数：8件

すみません。。一度同じ質問をさせていただいたのですが

横並びの画像を3枚時間差でフェードインさせたいのですが
サンプルがどこにも見当たらず。。
どなたかご教授いただける方何卒よろしくお願いいたします・・！！
前回の質問ではＩＥしか対応しておらず、Firefoxとクロームでも対応させたいと思っております。

通報する

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

質問の本文を隠す

A 回答 (8件)

No.8ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

エスパーです。

^^;

あなたの さいてきちは、いかです。
var myspd = 25;
var myx = 10;

がぞうの さいずが おおきようなので りさいずします。
ぶらうざに ひょうじされる 画素数と 元の がぞうの 画素数を おなじに します。

/*
もしかのうであるのならば、
ういるす駆除けいの、ソフトをとりさります。
もっとも おすすめしたいのが、さいそくのマシンにこうかんすることです。

あと、わたしへの「ありがとうポイント」を MAX に！
（もちろん、じょうだんですが。）
*/
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当にお恥ずかしい限りです・・・・。
微妙な数字で調整し、その後500など極端に数字を上げたりして・・。
動きがカクカクに・・。

回答いただいた数値を入れる＋画像サイズを下げる
をするとナント理想の動きになりました！！！

ありがとうございます・・・・・！！感謝です～！！

またお世話になるかもしれませんが懲りずによろしくお願いします・・・

通報する
お礼日時：2012/10/04 16:04

No.7

  • 回答者： babu_baboo
  • 回答日時：

だからそれはきっと、<style>~</style>ぶぶんのなかに、ぜんかくくうはくがあるから。



（きっとおれは、エスパーにちがいない。）

この回答への補足

エスパーです！
全くその通りでした・・・！
ありがとうございます！

ただ・・ＩＥではスピードが異様に遅くｆｉｒｅfoxとクロームでも遅めなのです・・・
改善方法がございますでしょうか？
下記の様に設定しています。

var myspd = 1; // 変化する速さ（ミリ秒単位）
var myx = 1; // 何%ずつ変化させるか

何度も何度も本当に申し訳ございません・・・

補足日時：2012/10/04 14:09
通報する
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： LancerVII
  • 回答日時：

こんにちは。




>ただ、<ul>のＩＤを(fade)に設定したいのですが
<ul id="fade">だとした場合

<script type="text/javascript">
$().ready ( function() {
$('#fade li').each ( function(index) {
$(this).delay(index*1000).fadeIn();
});
});
</script>

で動きます。

#fade liとすることでid="fade"内のliという指定になります。

この回答への補足

ありがとうございます！
ＩＤを設定したところ見事3枚の画像は重い通りの動きをしてくれたのですが

同ページの下部コンテンツにて下記ＵＲＬの様なJqueryの
ギャラリーを設置しています。
http://www.twospy.com/galleriffic/example-2.html
こちらが表示されなくなってしまいました・・。
ソースが喧嘩している状態なのでしょうか・・
何度もすみません・・！一度みていただけますでしょうか。

補足日時：2012/10/04 11:14
通報する
    • good
    • 1
    • 件
通報する
この回答へのお礼

こちらも簡単でとても使いやすそうでした！！
ソースが喧嘩しないように改造出来るように
勉強します・・・！
私の力不足でした・・・。ソースをいただいて解析したいと思います。
ありがとうございました！

通報する
お礼日時：2012/10/04 16:07

No.5

  • 回答者： babu_baboo
  • 回答日時：

それはきっと、<script>~</script>ぶぶんを、<head>内にうつしたから。

この回答への補足

ありがとうございます！
そのように設定したら画像は表示されたのですが
一番左の画像（px1）のみが綺麗にフェードインで表示され、
後の二枚はすでに表示されている状態からパっと一瞬消えて
フェードインが始まりました。
原因を探りましたが情けない事に全く分かりませんでした～・・

補足日時：2012/10/04 11:17
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： babu_baboo
  • 回答日時：

ぜんかくくうはくは、はんかくに。



<!DOCTYPE html>
<title></title>
<meta charset="UTF-8">
<style>
#hoge li img {
　opacity : 0;
　filter : alpha(opacity=0);
}
</style>

<body>
<ul id="hoge">
<li><img src="image/mainpx_01.jpg" id="px1" width="365" height="484">
<li><img src="image/mainpx_02.jpg" id="px2" width="365" height="484">
<li><img src="image/mainpx_03.gif" id="px3" width="270" height="484">
</ul>

<script> // 画像のフェードイン・フェードアウト

var myspd = 5; // 変化する速さ（ミリ秒単位）
var myx = 1; // 何%ずつ変化させるか
var mypic = ["px1","px2","px3"]; // 画像のname（順番に並べる）
var mycnt = 0;
var myp = 0;


function mygo() {
　var s = document.getElementById (mypic[myp]).style;

　if (100 < mycnt)
　　mycnt = 100;

　s./*@cc_on @if(1)filter = 'alpha(opacity='+ mycnt+ ')' @else@*/ opacity = (mycnt / 100) /*@end@*/;

　mycnt += myx;

　if (mycnt == 100) {
　　mycnt = 0;
　　myp++;
　}

　if (myp < mypic.length)
　　setTimeout (mygo, myspd);
}

mygo ();
</script>

この回答への補足

ありがとうございました！
やってみましたが画像が表示されずに真っ白になってしまいました・・
なんででしょうか～もう全く分かりません・・・

補足日時：2012/10/03 14:39
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



こんな感じでしょうか？
http://hppg.moe.hm/okwave/qa/q7728418/

jQueryを利用できれば比較的簡単なソースで実装できます。

リンク先からソースを見てみてください。

この回答への補足

動きはまさにそんな感じです！
ただ、<ul>のＩＤを(fade)に設定したいのですが
<script type="text/javascript">
$().ready ( function() {
$('ul li').each ( function(index) {
$(this).delay(index*1000).fadeIn();
});
});
</script>

ここの個所で設定するのでしょうか？
何も知らなくてすみません・・
JsでのＩＤの設定の仕方をご教授いただいてもよろしいでしょうか？

補足日時：2012/10/03 14:26
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： too_bad
  • 回答日時：

>>1です。


フェードインするだけで前の画像はそのまま残るということでしょうか？
スライドではなくフェードインですよね？
一定時間で前の画像がフェードアウトし、代わりに前の画像が表示されていた
場所にフェードインする、いわゆるクロスフェードタイプのことを
おっしゃっているのではないですか？
ちなみにスライドとは、画像が何枚か並んでいて、それが横に動いて
次の画像を表示させるものを言います。

こういうのがクロスフェード
http://exyz.cocolog-nifty.com/good_sleep/2009/02 …

こういうのがスライド
http://black-flag.net/jquery/20120215-3671.html

どちらが必要かはわかりかねますが、こういうのでよろしいでしょうか？

この回答への補足

3枚横並びの画像が順にフェードインで現れてフェードアウトで消えずに
そのまま残った状態です。
シンプルな動きなのに難しいです～！
LancerVIIさんの欄に記載されているＵＲＬの動きです～。

補足日時：2012/10/03 14:38
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： too_bad
  • 回答日時：

それはクロスフェードということでしょうか？


以下のサイトは参考になりますか？

参考URL：http://weblearnlog.toypark.in/javascript/jquery/ …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
こちらも確認したのですが、3枚横並びでシンプルに時間差でフェードイン
といったサンプルが無かったのです・・
なかなか無いものですね・・・

通報する
お礼日時：2012/10/02 16:55

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報