• 締切済み

animate関数とmousewheelイベント

jquery(ver1.8.1)とjquery.mousewheel.jsを併用した場合の質問です。 マウスホイールイベントで、ある地点まで画面をスクロールさせたいのですが、 マウスホイールを連続で回した場合、スクロール最中はイベントを検知しないように処理したいのですが、方法がわかりません(下記は下方向のみの処理)。現状ではスクロール中に余分なイベントを拾っているようで挙動がおかしいです。 よろしくご教授ください。 var flug=0;var pointArray=new Array(0,100,200,300,400); $(window).bind('mousewheel',function(event,delta){ var dir=delta>0 ? 'Up':'Down',vel=Math.abs(delta); if($('html,body').not(':animated')&&dir==="Down"&&flug<=pointArray.length-1){ flug++; $('html,body').stop(true,false).animate({scrollTop:pointArray[flug]},{duration:500,complete:function(){$(this).queue([]).stop();}}); }else{ return false; } });

みんなの回答

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

jqueryはろくに知りませんし、jquery.mousewheelはまったく知らないので、まるきりわかってませんが… >スクロール最中はイベントを検知しないように処理したいのですが、方法がわかりません jQueryでアニメーションを行なっていれば、:animatedで識別できるはずと予想しますが、自前で行なうのであれば、アニメーション中のフラグを用意しておいて、フラグが立っている間は処理をしないようにすれば良いのではないでしょうか。(アニメーションのcallbackでフラグをクリア) でも、原因はそこではないような気もしますが… >挙動がおかしいです どのようにおかしいのか書いて無いので不明ですが、もしもスクロール速度にムラがあるといったような現象であれば、  stop(true, false)で距離に残りが出るので、次に移動する量はそれまでと変わるはずですが、それに対して一定のdurationでアニメーションすると結果的に速度が変わって見えるのではないかと。 何もしないでアニメーションを実行するとかにすれば、jQueryの場合はキューが溜まるだけではなかったでしたっけ? 移動方向が変わったときだけ、クリアしてあげるとか… ろくにわかっていませんので、意味が違っていたなら無視してください。

関連するQ&A

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

    <使用: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

  • mousewheelイベントについて

    あまりしないことだと思うのですが。 質問させていただきます。 ボタンをクリックしてmousewheelイベントを発生させることはできるでしょうか。 下記の様に書いたのですが、 event.wheelDelta = -120; //or 120 が無視されました。 function click_hoge(){ var event = document.createEventObject(); event.eventType="mousewheel"; event.wheelDelta = -120; //or 120 document.body.fireEvent( "onmousewheel", event ); } 失礼いたします。

  • 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あれば教えて頂けると幸いです。 よろしくご教授ください。

  • イベントリスナーの部分を関数にしたい

    イベントリスナーの部分で、「load」以外に「change」も必要になったので関数にしたいのですが、 引数の関数の指定方法がわかりません。 どうすればいいのでしょうか。よろしくお願いします。 【イベントリスナーを関数にする前】 function hoge(){ this.view = function(){ var _this = this; window.addEventListener( 'load',function(){ _this.foo()}, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view(); 【やってみたこと】 function hoge(){ this.view = function(){ var _this = this; var func = function(){ _this.foo()}; this.addListener( 'window', 'load', func ); } this.addListener = function(elem,type,func){ elem.addEventListener( type,func, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view();

  • jQueryで困っています。教えてください。

    スムーススクロールを導入しようと、いろいろ調べて以下のものを参考にさせていただこうと考えています。どうゆう流れになっているのかを調べて分からないことがあったので投稿させていただきました。var target = jQuery(href == "#" || href == "" ? 'html' : href);この行の意味がわかりません。また、targetに何が代入されているのか分かりません。回答よろしくお願いします。 jQuery-------------------------------------------- //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed); return false; }); });

  • 複数のイベントリスナーを設置するのは正しい?

    クリック時、マウスオーバー時、マウスアウト時の処理を作るとき、 イベントリスナーの使い方はこのようなやり方でよいでしょうか。 var d = document.getElement.ById("id"); d.addEventListener('click', function(e){ var tar=e.target; tar.style.backgroundColor ="#000000"; },false); d.addEventListener('mouseover', function(e){ var tar=e.target; tar.style.backgroundColor ="#aaaaaa"; },false); d.addEventListener('mouseout', function(e){ var tar=e.target; tar.style.backgroundColor ="#555555"; },false);

  • 子要素のスクロールが親要素に伝播しないようにしたい

    スクロールバーを持つ子要素 と その親要素であるwindow があり、 子要素のスクロール位置が一番上にある状態で、上に向かってホイールスクロールすると親要素windowのスクロールバーが動いてしまいます。 また、その逆に 子要素のスクロール位置が一番下にある状態で、下に向かってホイールスクロールすると親要素windowのスクロールバーが動いてしまいます。 この挙動をやめたいのですがどのようにすればよいでしょうか。 具体的にはFacebookの右上(外側のサイドバーの上)にあるフレンドのアクティビティを表示している領域の様な動作にしたいです。 下記コードでは実現出来ませんでした。 $("#sample").on('scroll mousewheel', function(event) { event.stopPropagation(); }); ライブラリはjqueryを使っています。 よろしくお願いします。

  • jQueryのイベントに引数を渡したい

    例えば以下のような既存のJavaScriptのコードをjQueryのイベントで書き直したい場合、関数の引数で渡していた値は、どうやって渡すのでしょうか? 【html】 <a href="" onclick="func_a('abc'); return false;"></a> 【JavaScript】 faunction func_a(param_a){ alert(param_a); } 以下のようにすれば渡せないことはありませんが、かなり強引な感じがします。 【html】 <a href="" class="abc"></a> 【jQuery】 $(function() { $("a").click( function(){ var param = $(this).attr("class"); alert(param); return false; } ); }); こういう場合はjQeuryであっても、onclick属性で関数を呼び出すのが普通なのでしょうか? ご存知の方がいらっしゃいましたら教えてください。 よろしくお願い申し上げます。

  • jQuery 同じ処理を関数にまとめたい

    jQueryでプログラムを書いています。 同じ処理が複数出てきているので一まとめにしてて見やすくしたいのですが・・・・ やり方がわかりません。 たとえば、 $("#id1").on("click",function(){ var num1=1; var num2=2; var a; a=num1 + num2; alert(a); }) $("#id2).on("hover",function(){ var num3=3; var num4=4; var b; b=num3 + num4; alert(b) }) のようにほぼ同じ処理を違うイベントで行う場合です。 関数自体は作れるのですが、、、、 function calc(numa,numb){ alert(numa+numb); } jquery内でjavascript(Java?)の関数は使えないというのを聞いたことがあります。 どのようにすれば使ええるのでしょうか?

  • IEのみjqoueryスライダーが動かない

    いつもお世話になっています。 Wordpressでサイトを構築しています。 firefoxやsafariでは動作確認がとれいていますがieのみ動きません。 なぜでしょうか? <script src="/js/jquery-1.6.2.min.js"></script> <script src="/js/jquery.easing.1.3.js"></script> <script src="/js/jquery.bxslider.min.js"></script> <?php wp_head(); ?> <script type="text/javascript"> $(function(){ var slider = $('#slider8').bxSlider({ auto: true, pager: true, speed: 1000, controls: true, }); $('.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'); }); jQuery(function() { var topBtn = jQuery('.tothetopfixed'); //最初はボタンを隠す topBtn.hide(); //スクロールが100に達したらボタンを表示させる jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップに戻る //500の数字を大きくするとスクロール速度が遅くなる topBtn.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> よろしくお願いします。