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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

手っ取り早くやるならstopですかね。



$(window).keyup(function() { $("#map").stop(true); });

引数にtrueを渡せば、実行待ちしているアニメーション処理も削除してくれます。

キーを押し続けるとanimateメソッドが無駄に呼ばれ続け
無駄にキュー登録されますから、止めることを考えるより
無駄に呼び出さない方向で考えないとダメだと思いますけど。
    • good
    • 0
この回答へのお礼

ありがとうございます。
確かにstopも使えそうなんですが、キュー登録自体は増えてしまうのが難点で....

質問後も色々自分で試してみましたが、

function mainKeyIvent_parts(){
$(window).unbind("keydown",mainKeyIvent);
setTimeout(function(){$(window).bind("keydown",mainKeyIvent);},250);
}

という関数を組んで、キー入力があると、250ミリ秒間(これはアニメの速度によって手動調整)キー入力ができないようにしてみたら一応意図通りに動くようになりました。


ただ、stopの時の様にまだ何か落とし穴があるかもしれませんね、
難しい(泣)

お礼日時:2011/04/11 09:01

おそらく、animate() は非同期処理なのでしょう。


http://api.jquery.com/animate/

アニメーション中は keydown しても animate() しないように #map をビジー状態にする必要があります。
animate() 処理に移る前に <div id="map" aria-busy="true"></div> のようにして、aria-busy="true" 中は animate() しないようにしてみてください。
http://www.hitachi.co.jp/universaldesign/wai-ari …
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qonkeydownの連続?

例えば、キーボードで「a」キーをずっと押しっぱなしにして
aaaaaaaaaaaaaa…と打つとき
始めは a で止まり、一瞬、間があいてaaaaaaaa…
となりますよね??
(説明下手ですみません!!やってもらえるとわかると思うんですが)
OSの設定によって違う方もいらっしゃると思いますが、
これを一瞬の間をあけることなく、OSの設定に依存しないで、aキーを押したらすぐにaaaaaaaaaaaa…となるようにJavaScriptで実現したいのですが…

onkeydown や onkeypressではダメだったので
何かそうゆうのを指定できるプロパティなどないかなと思いまして質問しました。

やりたいことは、簡単なゲームみたいなもので
キーを押してから動きに時間差がある今の状態だとどうしても不具合なもので…

何か工夫などありましたら教えて下さい!!
お願いします

Aベストアンサー

<html>
<head>
<script type="text/javascript">
<!--
var k=null,t=null;
function f(){if(k)document.getElementById("orz").innerHTML+=k+" ";}
function g(){k=window.event.keyCode;t=setInterval(f,1);}
function h(){k=null;clearInterval(t);}
//-->
</script>
</head>
<body onkeydown="g()" onkeyup="h()">
<button onclick="document.getElementById('orz').innerHTML='';">clear</button>
<div id="orz"></div>
</body>
</html>

Qキーイベントを擬似的に発生させることは可能?

JavaScriptのイベント処理で質問なのですが、
keydownなどのキーイベントを、実際にキーを押さずに擬似的に「このキーが押された」というイベントを発生させることは可能でしょうか?
そもそも不可能ではと思っているのですが
もしそういうテクニックがあるのならと思い質問させていただきました。

また、JavaScriptでは無理だがFirefoxのアドオンなら可能といった情報があればぜひ教えていただきたいと思います。

Aベストアンサー

>keydownを使わないとして
いや、言ってない、言ってない(笑)

対応ブラウザとかは検討してないけど、一応規格にはあると思う。
(つーかDOM 3だからIEで出来ない可能性濃厚)

document.createEventのソースコード
https://developer.mozilla.org/en/DOM/document.createEvent

event.initKeyEvent(GeckoはDOM 2時代のものをベースに組んでいるからinitKeyBoardEventを使うらしい)
https://developer.mozilla.org/en/DOM/event.initKeyEvent

element.dispatchEvent
https://developer.mozilla.org/en/DOM/element.dispatchEvent

を組み合わせていけるんじゃないかと。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QCSSでreadonlyの機能はありますか?

ASPにてCSSを使用しています。
inputタグを読取専用(readonly)にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

QPHPのif文でその処理を途中で抜けるにはどうすればよいでしょうか?

PHPのif文でその処理を途中で抜けるにはどうすればよいでしょうか?
for文やwhile文ではbreakやcontinueなどが使えるようですが、if文にはないのでしょうか?

条件分岐がいくつかあって、その一つを途中で抜けて次の条件分岐へと移行したいのですが、
exitを使ってしまうと、次へ行かずに処理が中止されてしまいますし、
どのようにすればよいのか分からず困っています。何かよい方法はないでしょうか?

Aベストアンサー

例えば「goto 演算子」を使うとかですね。
http://php.net/manual/ja/control-structures.goto.php
(参考URL)

「if文を強制終了」というより「ステップの強制移動」と言った感じです。

ただ、あまりgoto演算子はお勧めできません。
複雑な処理になればなるほど、バグが発生した際にバグ元を発見し難くなります。

本来は細かく制御文を入れていけば、あまり必要ないと思いますが・・・

Q白い部分を透明にすることは可能ですか?

ペイントで白い部分を透明にすることは可能ですか?
やり方を教えてください。
ペイントじゃできないのかも教えてください。

Aベストアンサー

 残念ながらペイントでは、まわりが、白いままです。
 
 お使いのパソコンのOSが、一致するようでしたら
 
 無料のソフト「GIMP」(ギンプ)を使用することをおすすめします。

 ・Gimp2のダウンロードページ
 http://www.geocities.jp/gimproject2/download/gimp-download.html


 ・GIMP(ギンプ)の使い方
透過(透明な部分を作る技法)
 保存は、gifかpngの拡張子にして下さい

  http://www.geocities.jp/gimpmanual/manual.html

 ※jpgは、写真を構成するのが、目的な拡張子ですので
   まわりが、白くなり透明には、なりません。

Qエンターキーを押したときに関数を呼び出す方法

エンターキーを押したときに関数を呼び出すにはどのようにプログラムを記述すればよいのですか?

Aベストアンサー

大抵の言語ではキーが押されたかというハンドラがありそのオブジェクトとして何のキーが押されたかの情報があります。
javascriptでもonKeyPressハンドラのオブジェクトwindow.event.keyCodeの内容を見てエンターキー(値は13)だけ処理をするという形にすれば云いと思います。
即席で作ったサンプルですが参考にして下さい。

<html>
<head>
<title>sample</title>
<script language="JavaScript">
<!--
function Key_on(key)
{
if(key == 13){
alert("ENTERが押されました");
}else{
alert("ENTER以外が押されました");
}
}
-->
</script>
</head>
<body onKeyPress="Key_on(window.event.keyCode)">
何かキーを押して下さい
</body>
</html>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報