• ベストアンサー
  • すぐに回答を!

jquery:animate中にイベントを付与

#box{width:100%;height:100%;position:relative;} #idou{width:3000px;height:100%;position:absolute;} #ugoku{position:absolute;top:-300px;right:-1500px;} a{display:block;width:100px;height:100px;right:0;top:100px;} <div id="box"><div id="idou"><img id="ugoku" src="*.gif" width="300" height="300"><a href="">左に移動</a></div></div> ・jQuery(1.7.1) ・mousewheel.jsを使用、var scrollInt=100;$('html').mousewheel(function(event,mov){$("html,body").css("left","-="+(scrollInt*mov)+"px");});で通常は横移動するソース。 ・$("a").click(function(){$("#idou").animate({left:0},"slow");});でリンクをクリックすると左に戻す。この時の#ugokuが問題。 ・移動の角度は50度で設定、#idouのleftが-1000~-1500pxの間というような特定の間に#ugokuの画像を画面の右上から左下にanimateで流したい。 最後の項目をやろうとして完全に行き詰ってしまって困っています。 どちらかというと数学の問題かもしれません。 animate動作中に、#idouのleftが~pxになったときを拾うようなイベントは存在するのでしょうか?その他良いやり方やURLあれば教えて頂けると幸いです。 よろしくご教授ください。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数294
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1
  • fujillin
  • ベストアンサー率61% (1594/2576)

意味がよく理解できてませんが… >#idouのleftが~pxになったときを拾うようなイベントは存在するのでしょうか? そのようなイベントはありませんので、監視していて所定の条件になったら処理を行なうといった方法になろうかと思います。 何もきっかけもない時は、常時、一定時間ごとに監視を繰り返すことになりますが、ご質問のケースではanimateの動作中だけ監視すればよさそうなので、animateのoptionのstepを利用すれば、アニメーションの1ステップごとに所定の関数が呼び出されますので目的を達せられませんか? http://api.jquery.com/animate/ 例えば、  $("a").click(function(){  var i=0;   $("#idou").animate({left:0},{    duration: "slow",    step: function(now){     $("body").append("<div>step" + (i++) + " left=" + now + "</div>");    }   });  }); (インデントを全角空白にしてあります)

共感・感謝の気持ちを伝えよう!

質問者からのお礼

説明がうまくできなかったのにこちらが知りたいことを 的確にご回答ありがとうございました! 結果的に使用はしなくなりましたが、 今後に大変役に立ちました。 ありがとうございました!

関連するQ&A

  • CSSのdivで、ページ全体をセンタリング出来ない

    質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか? ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。

  • jQueryでn秒後に要素を最後に移動

    $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>'); $(".banner").click(function(){ $(this).prependTo("#top_banner"); }); $(".banner1").delay(1000).prependTo("#top_banner"); $(".banner2").delay(2000).prependTo("#top_banner"); <div style="width:750px; background-color:#808080; height:90px; padding-top:6px;"> <div style="width:735px; margin:auto; position:relative;" id="top_banner"> </div> </div> 上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、 うまく動作しません。 クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。 1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。 delayはprependToには効かないのでしょうか。 また、上記ソースをもう少し完結にまとめることは可能でしょうか。

  • 中央寄せが出来ません。

    下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか? アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }

    • ベストアンサー
    • HTML
  • cssでコーディング レイアウト重なってしまう

    たすけてください かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで 重なり作業ができません。positionの設定がいけないのはわかっています。。。 上から順にheader→nav→a→b(c1,c2)→footerです。 jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、 navがうごくようになったら他の<div>がきゅっとうえによってしましました。 他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。 空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。 以下にソース書きます。 お願いいたします。 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var dy=$(this).scrollTop(); console.log(dy); $("#nav").css("top",150+dy/8); }); }); </script> <body> <div id="wrap"> <div id="header" class="box"></div> <div id="nav" class="box"></div> <div id="a"></div> <div id="b" class="box"> <div class="c_box" id="c1"></div> <div class="c_box" id="c2"></div> </div> <div id="footer"></div> </div> </body> <style type="text/css"> .box { margin:0 auto; width:1260px; position:fixed;} #wrap { weidth:1260px;} #header { height:145px; background:#fcc; } #nav { height:69px; background:#ccc; top:150px; } #a { width:1285px; height:522px; background:#ccf; } #b { height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;} .c_box { width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; } #c1 { position:absolute; left:24px; top:308px; } #c2 { position:absolute; left:465px; top:308px; } #footer { height:100px; background:#fac; } </style>

    • ベストアンサー
    • CSS
  • 1カラムのリキッドレイアウトについて。

    1カラムのサイトを作っています。 背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。 【html】 <body> <div id="wrapper">→背景画像を表示 <div id="logo"></div> <div id="travel"></div> <div id="member"></div> <div id="bbs"></div>  →これらはボタン。絶対配置。 </div> </body> 【css】 #wrapper{ width:100%; height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・) background:url(../images/1000.jpg) no-repeat; position:relative; } #logo{ height:120px; width:360px; position:absolute; top:50px; left:50px; background:url(../images/logo.gif); } #travel{ height:80px; width:200px; position:absolute; top:250px; left:400px; background:url(../images/travel.gif); } #member{ height:75px; width:200px; position:absolute; top:400px; left:100px; background:url(../images/member.gif); } #bbs{ height:80px; width:200px; position:absolute; top:300px; left:700px; background:url(../images/bbs.gif); } ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。 文章などのコンテンツがないため、背景画像が全画面で表示されないのです。 どのようにしたら意図する表示が可能でしょうか? できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。

    • 締切済み
    • CSS
  • jQueryのfilterについて

    jQuery初心者です。 .filterを使って、特定のCSSプロパティの値を持つものを検索し、抽出したもののCSSを書換えたいのですが、うまくいきません。 -------------------- z-indexの値が0以上のdivのwidthを200pxに変えるというコードを書いたつもりなんですが動きません。 ※head内 <style type="text/css"> <!-- div.animal { height:50px; border:5px solid red; background:rgb(255,140,0); } #neko { width:50px; position: absolute; z-index: 0; top: 50px; left: 50px; } #inu { width:50px; position: absolute; z-index: 1; top: 70px; left: 70px; } //--> </style> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> $('div').filter(function(){ return (parseInt($(this).css("z-index").text())>0); }).css("width","200px") </script> ※body内 <div id=neko class=animal></div> <div id=inu class=animal></div> 詳しい方が居られましたら、ご教授いただけませんでしょうか?よろしくお願いします。

  • CSSのpositionでフッターが最下に配置されてくれない

    CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか? WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA-->     コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。

  • ホイールのキュー溜りを防いで自然に動かしたい

    <使用:jQuery1.7.2、jquery-ui1.8.12、jQuery Easing v1.3、jQuery Mousewheel Plugin 3.0.5> $('html').mousewheel(function(event,mov){ $("#naiyou").stop(true,false).animate({left:"+="+speed+"px"},800,"easeInOutQuad"); event.preventDefault(); return false; }); <div id="kotei" style="width:100%;height:100%;position:absolute;"> <div id="naiyou" style="width:1000px;height:100%;position:absolute;">***</div> </div> こんな感じのjsを書いて、ホイールで横スクロールするものを作ろうとしています。 ホイール自体は無事に動くのですが、動いている最中に続けてホイールすると、 先の動きが不自然に止まって次の感知分に飛ぼうとしてしまいます。 キューがたまるのを防ぐためにstopを使っていますが、 先の動き分がぴったり止まるのではなくストップ前に軽くイージングするなど 先の動きを妨げずに処理することはできないでしょうか? (動きの理想↓) http://51hours.tumblr.com/post/7781425247/mario-kart-wii-experience

  • 【jQuery】要素を合わせた横幅の取得について

    現在、要素が横並びになった横スクロールのサイトを作成中です。 各コンテンツ要素のsectionの横幅は固定ではなく、 縦幅に合わせて可変するようにしています。 htmlは以下のようにしています。 <div id="wrap"> <div id="header"> <ul><li></li></ul> </div> <div id="secWrap"> <div class="section"> ここに内容 </div> <div class="section"> ここに内容 </div> </div> </div> wrapにsectionの幅を足した合計の横幅(px)を加えたいのですが、 正しいサイズを取得できず、sectionがカラム落ちしてしまいます。 以下のjsの何かが間違っているのでしょうか? それともCSSなどで何かしらの指定が必要なのでしょうか。 お分かりの方がおられましたらご教授頂けたら幸いです。 ■javascript $(function(){    function adjust(){ var h = $(window).height(); var h1= $('#header').height(); $('.section').css('height', h-h1); var cont = $('.wrap');//コンテンツの横サイズ var contW = $('.section').outerWidth(true) * $('div',cont ).length; cont.css('width', contW); var speed = 50; $('html').mousewheel(function(event, mov) { $(this).scrollLeft($(this).scrollLeft() - mov * speed); $('body').scrollLeft($('body').scrollLeft() - mov * speed); return false; }); } adjust(); $(window).on('resize', function(){ adjust(); }) }); ■CSS body { height: 100%; overflow-y: hidden;} html{height: 100%; } #header{ position: fixed; height: 50px; left: 0px; top: 0px;} .wrap{ top: 50px; position:absolute; height:100%; } .section { float:left; }

  • jQuery bxSlider でのアニメーション

    jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。1枚目から5枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか? <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>