• 締切済み

フェイドインしながら移動させたい

下記の様にスクリプトを書いているのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000).animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000).animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000).animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- フェイドインした後に上に移動してしまいます。 フェイドインしながら移動させるにはどのように書けば良いのでしょうか。 ご教授頂けると非常に助かります。

みんなの回答

回答No.3

２つにわけてみてはどうでしょうか。 （jQueryは内部でクロージャーを作りますので、1つめの$('#box01')と2つめの$('#box01')が別々のタイマーで管理されると思います。） $('#box01').fadeIn(1000); $('#box01').animate({'marginTop': '-20px'});

tenpraxxx
質問者

お礼

talooさん ご回答有難う御座います。 上記試してみたのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/ … <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000); $('#box01').animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000); $('#box02').animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000); $('#box03').animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- 同じく別々に動いてしまいます、、

回答No.2

jQuery がなくても、そのていどならできます。 ぜんかくくうはくは、はんかくにね。 （超蛇足つきです。） <!DOCTYPE html> <title></title> <style> ol > li { 　width : 50px; 　height: 50px; 　line-height:50px; 　text-align:center; 　background:green; 　border:2px #050 solid; 　opacity : 0; 　filter : 'alpha(opacity=0)'; 　list-style:none; 　position : absolute; } </style> <body> <ol> 　<li>a 　<li>b 　<li>c 　<li>d 　<li>e </ol> 　 <script> if(!Array.prototype.forEach)Array.prototype.forEach=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)a in this&&b.call(c,this[a],a,this)}; (function () { 　var doc = document; //　var li = doc.querySelectorAll ('ol > li'); 　var li = doc.getElementsByTagName ('li'); 　var opacity = 0; 　var radius = 300; 　var step = 1/10; 　var n = 0; 　var deg = Math.PI/180; 　var grp = [ 　　[li[0], 300, 0], 　　[li[1], 300, 60, 20], 　　[li[2], 300, 120, 40], 　　[li[3], 300, 180, 60], 　　[li[4], 300, 240, 80] 　]; 　 　(function LOOP () { 　　grp.forEach (function (a) { 　　　var s = a[0].style; 　　　var k = (a[3]||0)*deg; 　　　s.top = (a[1] - Math.cos (k)*radius*n|0) + 'px'; 　　　s.left = (a[2] + Math.sin (k)*radius*n|0) + 'px'; 　　　s.opacity = n; 　　　s.filter = 'alpha(opacity='+(n*100|0)+')'; 　　}); 　　if ((n += (1-n)*step+0.001) < 1) setTimeout (LOOP, 30); 　 }) (); }) (); </script> </body>

tenpraxxx
質問者

お礼

babu_babooさん ご回答有難う御座います。 jQueryなくてもこんな動きが出来るんですね！ 参考になりました。

  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

javascriptあるいはjQueryは、どこまで理解されているのですか？ もしくは、コピペ以上のことは出来なかったりしますか？

tenpraxxx
質問者

補足

tracerさん ご回答有難う御座います。 お察しの通り、CSS・HTMLの知識はあるのですが、 javascript・jQueryの知識が乏しく、コピペ以上のことは出来ません。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jqueryで順番に実行する方法

    jqueryについて教えてください。 画像を順番に表示するにはどうすればよいのでしょうか？ 下記のようにやるとすべての画像が同時にフェードイン、フェードアウトします。 setInterval(function() { $("#i1").fadeIn(3000).fadeOut(3000); $("#i2").fadeIn(3000).fadeOut(3000); $("#i3").fadeIn(3000).fadeOut(3000); $("#i4").fadeIn(3000).fadeOut(3000); $("#i5").fadeIn(3000).fadeOut(3000); }, 6000); 同時にではなく、順番（１を表示した後に２というように）に表示するにはどうすればよいのでしょうか？

  • 黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えて

    黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えてください。 <head>の間に、 <script language="JavaScript"> <!-- var count = 0; var f3 = "0123456789abcdef"; function fadein(i) { if ( count < 16 ) { c = f3.charAt(i); document.fgColor = c + c + c + c + c + c; count++; setTimeout("fadein(count)",100); } } fadein(); //--> </script> </head> <body bgcolor="#000000" text="#ffffff"> 以上のタグを入れ、 <body bgcolor="#000000" text="#ffffff"> タグを<body>の代わりに置くと、リンク挿入されていない文字はフェードインされるのですが、リンク挿入文字は対応されません。 ソースをどのようにすれば、リンク挿入文字もフェードイン対応されるでしょうか。

  • jquery eachがうまく設定できません。

    $('.group').each(function(i){ var targetOn = $('.box-' + i); $(window).scroll(function(){ var targetOnPosition = $(targetOn).offset().top - $(window).height(); ; if ($(window).scrollTop() > targetOnPosition + 10) { $('.box-' + i).fadeIn(1000); } else { $('.box-' + i).hide() } }); }); 上記の$('.box-' + i)で.box-1、.box-2、.box-3それぞれが表示位置に来たときにフェードインするように、それ以外のときは消すようにしたいのですがうまくいきません。 $('.box-' + i)の部分を$('.box-1')などにするとうまくいきます。 記述の問題だと思うのですが、行き詰まったので質問させてください。 よろしくお願いいたします。

  • ｊQueryでの画像のフェードインのループ

    ｊQuery初心者です。 jQueryで３枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、１週ループまでは上手くいくのですが、２週目に２枚目の画像で止まってしまいます。 下記だと何故２週目の２枚目で止まるのか？の原因と、スマートな書き方をご教授頂けませんか？ <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>

  • スクリプト同士がケンカ？

    初めまして。 HTML CSSを若干触れるものです。 サイトを制作していまして、 一部にlightboxをスクリプトタグで表示させていたのですが 新たに違うスクリプトタグ（トップ画像の上を画像がふらふら動くイメージのため） によって打ち消されてしまい、lightboxの効果がなく、新しいタブで画像を開いてしまいます。 こちらがjugemで用意されたlightboxタグです。 <script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script> <script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script> ここからが後から入れたタグです。 <script type="text/javascript"> $(function() { var bg1 = $('#main-img'); var speed = 3000; cloudMove(); setInterval(cloudMove, 6000); function cloudMove(){ bg1 .animate({backgroundPosition:'30px'}, speed) .animate({backgroundPosition:'0'}, speed); } }); </script> これらは一緒に効果を出す事は可能でしょうか？ よろしくお願い致します。

    • ベストアンサー
    • HTML
  • メインウィンドウサイズの高さを500ピクセル以下に制限する方法を教えてください。

    お世話になっております。 現在、スクロールメニューバーでコンテンツを作っていますが、 スクロールするメニューの高さよりウインドウの高さを小さくすると、 エクセルの様にスクロールバーが永遠と続きます。 苦肉の策として、ウインドウの高さをメニューバーの高さより小さく出来ないようにしようと考えましたが、方法がわかりません。 教えてください。 ちなみに、現状のjavascripｔは下記のものを使用しています。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(function() { var offset = $("#sidebar").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#sidebar").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#sidebar").stop().animate({ marginTop: 0 }); }; }); }); </script>

  • jquery 追従メニュー　IEについて

    下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>

  • 画像がフェードイン・アウトするクラスの作り方教えて．．

    前置き：別に困っているわけでもありません ・こんな質問許されないかも（ご容赦を） ・自分で勉強しろと言われるかも（ごもっとも） ・ごみプログラムがさらにごみプログラムを生んでいるかも（ごめんなさい） 本題： いつぞやのタイトルくるくるのサンプルを基に、画像がフェードイン、 フェードアウトするオブジェクト指向っぽいスクリプトを作りました。 下のソースです。スタイル属性の変更をwindow.setIntervalを使って counter値に達するまでループ実行しているだけです。 似たような処理のfadeinクラスとfadeoutクラスを作って、 　fadein.start(ターゲット,インターバルミリ秒); 　fadeout.start(ターゲット,インターバルミリ秒); でフェードイン、フェードアウトを開始していますが、 fadeinクラスとfadeoutクラスをfadeinoutクラス一つにまとめちゃって、 fadeinoutクラスのメソッド(?)としてfadein、fadeoutを使えるように するには、どうやって作ればよいのかと言うのが質問です。 本当は、 　var myobj = new fadeinout(ターゲット,インターバルミリ秒); とインスタンスして 　myobj.fadein; 　myobj.fadeout; みたく使うためのコーディングがよくわからんのです。 抜本的に書き換えた方がよいのでしょうか... ＜作ったサンプル＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>FadeIn/FadeOut</title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- var fadein = function (node,interval){ this.counter = 0; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( ++this.counter>100) this.stop(); }; }; var fadeout = function (node,interval){ this.counter = 100; this.target = node; this.interval = interval; this.timerId = setInterval((function(that){ return function(){that.loop();}; })(this),this.interval); this.stop = function () { this.timerId && clearInterval(this.timerId); this.timerId = null; }; this.loop = function(){ this.target.style.width=this.counter+"px"; this.target.style.height=this.counter+"px"; this.target.style.opacity = this.counter / 100; this.target.style.filter = "alpha(opacity=" + this.counter + ")"; if( --this.counter<0) this.stop(); }; }; fadein.start = function(target,interval){ new fadein(target,interval ); } fadeout.start = function(target,interval){ new fadeout(target,interval ); } function fadein_s(){ var target=document.getElementById("target"); fadein.start(target,1); } function fadeout_s(){ var target=document.getElementById("target"); fadeout.start(target,1); } // --> </script> </head> <body> <div> <image id="target" src="image/yahagi.png" style="width:0px;height:0px;"> </div> <button onclick="fadein_s();">フェードイン</button> <button onclick="fadeout_s();">フェードアウト</button> </body> </html>

  • jqueryでのkeydownイベント発生回数制御

    main.html************************************* <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="css/ffUI.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/ffmain.js"></script> </head> <body> <div id="main"> </div> </body> </html> ffUI.css*************************************** * {margin:0;padding:0;} #main {width:320px;height:240px;overflow:hidden;} #map {margin-top:0px;margin-left:0px;} ffmain.js************************************** mainFunction(); function mainFunction(){ $("#main").append('<div id="map"><image src="image/maptest.gif"></div>'); $(window).bind("keydown",mainKeyIvent); } function mainKeyIvent(e){ switch(e.keyCode){ case(38): $("#map").animate({marginTop:"+=16px"}); break; case(40): $("#map").animate({marginTop:"-=16px"}); break; case(37): $("#map").animate({marginLeft:"+=16px"}); break; case(39): $("#map").animate({marginLeft:"-=16px"}); break; } } というコードを書いて、RPGのMAPのように、 出した画像が上下左右のキーで16ピクセルずつ動くコードを書いてみたんですが、 一応動きはしますが、キーを押しっぱなしにすると、 その間にキーイベントが蓄積されて、右を押していたら、 キーを離してもずーっと右に動きっぱなしなってしまったりします。 押している間は動き続けてもいいですが、離した瞬間にちゃんと止まるようにしたいんですけど、 どのようにコーディングすればよいでしょうか？ 環境はsafariです。 宜しくお願いしますm(__)m

  • このjQueryの意味を説明してください。

    jQuery の初心者です。 あるサイトからjQueryでクロスフェードさせる内容のものを 参考にしているのですが、セレクタなどの個々の意味が いまひとつ理解出来ません。 調べて自分なりの解釈を書きましたが、訂正などがありましたら ご説明頂ければと思います。 ■html <div class="box"> <img src="1.png" width="600" height="200" alt="" /> <img src="2.png" width="600" height="200" alt="" /> <img src="3.png" width="600" height="200" alt="" /> </div> ■css .box{ position:relative; height:300px; width:400px; } .box img{ position:absolute; left:0; top:0; } ■js $(function(){ $('.box img:gt(0)').hide(); //0より大きい数字のimgをhideする setInterval(function(){ $('.box :first-child') //.box内の一番目 .fadeOut(1500) //1.5秒かけてフェードアウト .next('img') //次のimgを .fadeIn() //フェードイン .end() //終わったら？？ .appendTo('.box'); //.boxに追加？？ },4000); //4秒間隔で繰り返す });

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する