• 締切済み

jQueryでのアニメーションで質問です。

ブラウザの右端から左端へ要素をスーッと動かして、 左端まで行ったら、右端から再スタートというのをループでしたいです。 とりあえず下記のようなスクリプトで可能なようですが、 これだとブラウザサイズを変えた際に、リロードしないとウインドウ幅を再取得できないようで、途中でブラウザサイズを広げると左端まで行かず、途中で移動が止まり、右端から再スタートというふうになってしまいます。 これに何を加えれば途中でブラウザサイズを変えてもちゃんと右端まで移動させられるでしょうか？ よろしくお願いします。 $(function () { setTimeout('rect()'); //アニメーションを実行 }); function rect() { var w = $(window).width(); $("#rect").animate({ left: w //要素を動かす位置 }, 3000).animate({ left: "-50px"　//要素を戻す位置 }, 0) setTimeout("rect()", 3000);//アニメーションを繰り返す間隔 }

みんなの回答

  • kteds
  • ベストアンサー率42% (1876/4424)
回答No.1

サイズを変えた、というイベント onresize を使用してはどうですか。 たとえば <body onresize="myFunction()"> とか object.onresize=function(){myFunction()}; です。

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

関連するQ&A

  • jQuery hover時に遅延させる方法

    よろしくお願い致します。 jQueryを使用して以下のようなコードを書いております。 $('#hoge').hover( function(){ $(this).animate({'marginTop':'100px'},500,'easeOutQuart'); }, function(){ $(this).animate({'marginTop':'0px'},500,'easeOutQuart'); } ); 上記のコードで問題なく動作するのですが、要素（#hoge）からマウスを離したときにだけ遅延処理をさせたいと思い、以下のようなコードを書いてみたのですが動作しません。 $('#hoge').hover( function(){ $(this).animate({'marginTop':'100px'},500,'easeOutQuart'); }, function(){ setTimeout(function(){ $(this).animate({'marginTop':'0px'},500,'easeOutQuart'); },1000); } ); この場合、どのようなコードを記述すれば良いのでしょうか？

  • jquery 複数のメソッド

    １つのid要素に対して、複数のメソッドを同時に動くようにする方法を教えてください。 下記の例を変更して頂きたいです。 ■例 $(function(){ $("#photo").fadeIn(1000).delay(3000).fadeOut(1000); $("#photo").animate({"left":"350px"},5000); }); 宜しくお願いします。

  • jQUery：フェードアニメーションについて

    jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/TFujinami/8EaB こちらのソースで、フェードアニメーションで メインイメージを変化させたいのですが、 どこを修正すればよいのでしょうか。 $(function(){ var slider_interval = 4000; var slider_now = 0; var slider_max = 0; var slider_mouseover = false; var slider_img_width = $("#slider").width(); var slider_href = new Array(); function sliderScroll(){ slider_now++; if (slider_now > slider_max){ slider_now = 0; } sliderAnimation(slider_now, 'slow'); } function sliderAnimation(index, speed){ $('#slider .gallery .inner').animate({'margin-left':index * -1 * slider_img_width + 'px'}, speed, function(){ $('#slider .thumbnail div').removeClass('now'); $('#slider .thumbnail div:eq(' + index + ')').addClass('now'); $('#slider .frame a').attr('href', slider_href[index]); }); } var sliderLoop = function(){ if (! slider_mouseover){ sliderScroll(); } slider_scroll_timer = setTimeout(sliderLoop, slider_interval); } $('#slider .thumbnail div').mouseover(function(ev){ slider_mouseover = true; slider_now = $(this).attr('data-sliderid') - 0; sliderAnimation(slider_now, 'fast'); }); $('#slider .thumbnail div').mouseout(function(ev){ slider_mouseover = false; }); $('#slider .gallery .inner div').each(function(){ $(this).css('margin-left', slider_max * slider_img_width + 'px'); $(this).css({'position':'absolute', 'margin-top':'0px'}); slider_href.push( $(this).find('a').attr('href') ); slider_max++; }); slider_max = 0; $('#slider .thumbnail div').each(function(){ $(this).attr('data-sliderid', slider_max); $(this).find('img').wrap( $('<a>').attr({'href':slider_href[slider_max], 'target':'flickr'}) ); slider_max++; }); slider_max--; $('#slider .frame img').wrap( $('<a>').attr('target', 'flickr') ); sliderAnimation(0, 'fast'); setTimeout(sliderLoop, slider_interval) }); 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。

  • jQueryのforループ時のanimate

    jQueryにて下記のように 配列にて登録した要素に対して forループにてanimateを実行し、 completeで、animate完了後の動作を実行したいのですが、 forループにて複数に対して処理を行った際の挙動がおかしく、 動作を実行する前にcompleteの処理が走ってしまいます。 どのようにすれば、forループで複数のanimate処理をおこなっても 動くことができるようになるのか、 教えて頂けますよう宜しくお願いいたします。 -------------------------------------------------------------------- $(document).ready(function () { 　for(i=0; i<10; i++){ 　　pArray($('p').eq(i)); 　}; 　for(i=0; i<10; i++){ 　　pArray[i].stop().animate({left: -100 * i}, {duration:1500, easing:'swing',complete:aaa()}); 　} 　function aaa(){ 　　alert('完了') 　} }

  • jqueryで画像を ↓ 停止 ← こういう風に動

    jqueryで画像を ↓ 停止 ←← 画像をこういう風に動かしたいのですが方向と距離が指示できません。 <html> <head> </head> <body> <img id="anime" src="ooo"> </body> </html> <script> jQuery(function(){ $('#anime').animate({ right : '100', width : '2500px', height : '200px' },15000); }); </script> right : '100',の部分を方向や数値を変えても左端から右端に移動するだけです。 よろしくお願いします。

  • jQuery クリックした後の動き

    ボタン(#btn)をクリックすると、#navWarpを右に200px 移動するところまでは出来ましたが、２度目のクリックで元の位置まで 戻すにはどのような方法があるのでしょうか。 宜しくお願いします。 ■jquery $(function(){ $("#btn").click(function(){ $("#navWarp").stop().animate({"left":"200px"},500); }); }); ■css #navWarp{ position:relative; margin:0 0 0 -200px; } #btn{ position:absolute; top:0; left:200px; cursor: pointer; } ■html <div id="navWarp"> <div id="btn"></div> </div>

  • スムーズに動く アニメーションの作成方法

    主要のブラウザ・OS・端末・各ディスプレイサイズの全てでスムーズに動く アニメーションの作成方法について教えてください。 今までに試した内容は、初めJクエリープラグインのバックストレッチを 試しました。ところがスムーズな動きをさせる為にはコマ数を増やして そのコマをめくる速度を早くしなければならず、元画像の枚数を増やし ソースBODY部分（下記※１）の数値を上げてみましたが、その結果、 ディズプレイやブラウザによってはピカピカッとバグが出てしまいました。 次に同じくJクエリーのJアニを試したところ、今度はスムーズに動きましたが、 元画像データの容量が大体１００キロバイト以上になると理由は不明ですが、 PCによっては数回に一度の割合で初めのコマが飛ばされてからの表示、即ち アニメーション途中からの再生表示になってしまいました。アニメーションの 表示サイズを大きくしたかったので、ファイルサイズはそのままで、ソース コードの記述変更にてその画像を拡大表示すれば解決すると思い試しましたが、 今度は「無限ループエラー」（下記※２）となりうまくいきませんでした。 どなたか解決出来る方法をご教示いただけませんでしょうか？ 私でも直ぐに解決出来る策を、初心者レベルで恐縮ですが、文面 もしくはソースコードにてご教示いただけませんでしょうか。 私のITスキルに関しては、見よう見まねで情報サイト等から得た ソースコードをいじれる程度のレベルです。なので、もしお手数で したら、参考になる分かりやすいサイトでも構いません。 《必須条件》 Windows・Mac・Android・IOS、IE７以降・Chrome・Safari・ Firefox・オペラ、ディスプレイサイズは１６：９と５：４と４：３ 上記の全てで正常な閲覧が出来るようにしたいです。 ※１： setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1; $.backstretch(images[index]); }, 1000); ※２：問題のソースコード。 【Jアニのソースコード】 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ;(function($){ var settings = {}; var element = {}; var currFrame = 0; var tm = null; var winW = $(window).width(); var winH = $(window).height(); $.fn.jani = function(sett){ element = $(this); settings = $.extend({}, $.fn.jani.defaults, sett); function _build(){ element.width(settings.frameWidth); element.height(settings.frameHeight); element.css('background-position', '0 0'); }; _build(); }; $.fn.jani.pause = function(){ if(tm){ clearTimeout(tm); } tm = null; } $.fn.jani.stop = function(){ if(tm){ clearTimeout(tm); } tm = null; currFrame = 0; element.css('background-position', '0 0'); } $.fn.jani.pause = function(){ clearTimeout( tm ); tm = null; } $.fn.jani.play = function(){ if(settings.totalFrames <= 0 || !element || !element.length){ return; } function _animate(){ _animate({width:winW, height:winH}); var tmFn = function(){ _animate(); }; var bgPos = element.css('background-position'); var ie = true; if(bgPos == 'undefined' || bgPos == null){ bgPos = parseInt(element.css('background-position-y')); } else { bgPos = bgPos.split(' '); bgPos = parseInt(bgPos[1]); ie = false; } bgPos -= settings.frameHeight - 1; if(ie){ element.css('background-position-y', bgPos + 'px'); } else { element.css('background-position', ('0px ' + bgPos + 'px')); } currFrame++; if(currFrame > (settings.totalFrames - 1)){ return false; currFrame = 0; element.css('background-position', '0 0'); if(!settings.loop){ return; } } tm = setTimeout(tmFn, settings.speed); } if(tm){ element.jani.stop(); } _animate(); } $.fn.jani.defaults = { frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 0, loop: false }; })(jQuery); ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 【JアニのINDEX】 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!doctype html> <html> <head> <meta charset="utf-8"> <title>m-corporation</title> <script type="text/javascript" src="./lib/mco.js"></script> <script type="text/javascript" src="./lib/inaj.js"></script> <script type="text/javascript"> function enlarger(selector, width, height, speed) { $(selector).animate({"width": width,"height": height},speed); } $(function(){ // ロード時 enlarger("#animation-1", 1000, 1000,0); }); </script> <style type="text/css"> .animation-1 { background: url(./images/img.png) no-repeat left top; } </style> </head> <body> <div id="animation-1" style="width:1000px;height:1000px;">animation-1</div> <script type="text/javascript"> $(document).ready(function(){ $('#animation-1').jani({ frameWidth: 400, frameHeight: 61, speed: 110, totalFrames: 49 }); $('#animation-1').jani.play(); }); </script> </body> ーーーーーーーーーーーーーーーーーーーーーーーーー 【Jアニ＆バックストレッチの参考URL】 Jani→ http://blog.verygoodtown.com/2010/01/animated-gif-jani/ backstretch→ http://kachibito.net/web-design/backstretch.html http://kachibito.net/web-design/backstretch.html

  • PCスマホの画面切り替えで領域がうまくとれません

    ＰＣ／スマホ兼用対応のページを作成しており、画面サイズが小さくなった際には横3グリッド(width300px/グリッド)から横2グリッド(width360px/グリッド)に変更するようなページです。 その中で、ＰＣの際にはマウスオーバー時にイメージタイトルがスライドイン／スライドアウトするようにしているのですが、以下のスクリプトで画面サイズが変更するたびに値を取得しているつもりなのですが、一度ＰＣでマウスオーバーを行い、スマホサイズに切り替えると左から300pxのところでイメージタイトルが残ってしまってしまいます。 逆の場合も、animation(left:'●●px'）で指定した場所に移動してくれないのですが、ご教授いただけないでしょうか？ 初めての質問なため、足りない点など多いかと思いますが、よろしくお願いいたします。 <script type="text/javascript"> window.onload = function(){ resizeTextArea(); } window.onresize=function(){ resizeTextArea(); } function getBrowserWidth() { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function resizeTextArea(){ var w = getBrowserWidth(); if (w >= 960) { //マスオーバー時に右にスライド $('.slideright').hover(function(){ $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'-300px'},{queue:false,duration:300}); }); //マスオーバー時に左にスライド $('.slideleft').hover(function(){ $(".cover", this).stop().animate({left:'120px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'300px'},{queue:false,duration:300}); }); }else{ $('.slideleft').hover(function(){ $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0}); }, function() { $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0}); }); } } </script>

  • JavaScriptアニメーションについて質問！！

    学校の授業の入門編でやったことです だから初心者です 使用ソフトはEmEditot, Internet Explorerです。 ペイントを使い　01.gifから順番に06まで絵をかきました そしてz:\local\100のフォルダに保存 z:\local\100 フォルダ内で 右クリック → [新規作成] → [テキストドキュメント] ファイル名を 100.html とする(注意が表示されるが実行する) 100.html を EmEditorで開く (アイコン上で 右クリック→[送る]→[EmEditor]) 以下のHTML文書を入力する（HTML文書をドラッグしてEmEditorに貼り付けてよい） xx, yy は作成した画像の幅と高さ, nnは画像枚数である それぞれを置き換えること gif形式(.gif)の画像として記述しているので他の形式の場合は拡張子を書き換えること <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = nn; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="xx" height="yy" /> </body> </html> という説明文があり　 <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = 06; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="128" height="128" /> </body> </html> まで書いたのですが　1枚しかネット上には表示されず アニメーションになりませんでした。 どうすれば　コマ送りみたいなアニメーションになりますか 書き方を教えてください

  • setTimeoutと擬似アニメーション

    いつもお世話になっております。 またもどんづまってしまい、質問をお許しください。(T-T) 【画像Aにマウスが乗ったら】、画像Bを start.gif(初期状態) → process1.gif → process2.gif → result.gif（ここで止まる/繰り返しなし） と擬似アニメーションさせて、 【画像Aからマウスが離れたら】、画像Bを最初の画像であるstart.gifに戻す、 ということをやりたくて以下のように書いてみました。 http://www.wendo.jp/temp/abc.html これで何となく希望通りの動作はするのですが、 どうしても二つ問題点が出てきてしまいます。 1). アニメーションが途中のフレーム（process1やprocess2）の時に、 マウスを離すと、start.gifにして止まって欲しいのに、 一瞬、start.gifが出た後、もう一度process1.gifに戻って アニメーションが再開してしまう。 そして最後のresult.gifまで行って止まる。 2). 上記のように、最後のフレームまで行かずにマウスを離した場合、 再度マウスオーバーしても、アニメーションが始まらない。 なお、確認はFireFox 1.5 と IE6でしております。 setTimeout/clearTimeoutの使い方が間違っているのでは思い、 自分で調べてできそうなことは全て試しましたが、 どうにもこうにも解決の糸口さえ見つかりません。 どうかご助言をお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する