こんにちは、
jQueryにおいて、要素に対して.hoverをかけ、:not(:animated)の指定をした場合、対象要素上で素早くマウスを滑らせると、アニメーションが終了する前にmouseleaveしてしまい、mouseenterの状態でアニメーションが止まってしまいます。(下記URL参照)
http://ref.andwax.com/Untitled-1.html
このように棚に並べたパンすべてに同様の処理を行う予定なのですが、前述の不具合が解消できなければアイディアそのものを変更を迫られることになると思われます。何か対処方法をご存じでしたら、お伺いできませんでしょうか。全く違う方法で同様の処理を行うアイディアをご存じでしたら、そちらもお聞かせいただけるとありがたいです。
また、area要素にはcursorプロパティが効かないようなのですが、カーソルを出現させるためのアイディアがありましたら、伺わせてください。
No.1ベストアンサー
- 回答日時:
jqueryは大してわかりませんが…
fadeIn/Outさせる対象要素は決まっているようなので、必ず操作するのですから :not(:animated)で選択する必要はないように思われます。
でも、アニメーション中にそれに反するアニメーションを指定すると変なことになるので、選択する代わりにアニメーションを停止させればよろしいかと。
http://api.jquery.com/stop/
$(function(){
$("#bread01").hover(function(){
$("#over").stop(true,true).fadeIn("fast");
},function(){
$("#over").stop(true,true).fadeOut("fast");
});
});
ただし、(↑)これだと一旦アニメーション終了の状態に飛んでしまうので、もっと速度が遅かったり、変化の度合いが大きいと不連続な感じになるかも。
(ご提示のサンプルの場合は、速度がfastで変化もそれほどではないので、あまり違和感はないと思いますが)
現在の構成だと、常に一番上にイメージマップが表示されているので、(下にある)#overはhide()する必要がなさそうなので、opacityの操作だけにして連続的に変化するようにもできそうですね。
$(function(){
$("#over").css("opacity",0).show(); //透明にして表示状態にする
$("#bread01").hover(function(){
$("#over").stop().animate({opacity:1}, "fast");
},function(){
$("#over").stop().animate({opacity:0}, "fast");
});
});
>また、area要素にはcursorプロパティが効かないようなのですが
効かないことはないみたい。
手近にあるブラウザで試したところ、fx(3.6)はareaで、opera(10)はmapに設定することで変化します。
ただし、cursol → cursor に。
IE(6)はどうもうまくいかないみたい(ちゃんと調べてませんが…)。いっそのこと、hoverの処理で一緒にやってしまうとか?
前回に続き、ご回答ありがとうございました。頂いたコードを試させていただいたところ、望む通りに機能しました。今まで、.stopは使ったことがなかったのですが、こういう風に使えばいいんですね。すごく感謝です。jQueryというかJavaScript自体、初めて一ヶ月なので、今後も質問させていただくことが多いと思いますので、その際はぜひよろしくお願いします。本当にありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
javascript(jQuery)でセル内...
-
Javascriptの変数がうまく渡せ...
-
JavascriptのFunctionの構文に...
-
一つのアクションで関数を二つ...
-
phpでの文字の点滅表示
-
[Delphi]入れ子(?)になったプロ...
-
jQueryの導入について
-
Javascriptで引数の参照渡しか...
-
jQueryでのレスポンシブが綺麗...
-
同じIDで定義した要素の配列を...
-
window.openでタイトル名の指定
-
<a>タグのテキストを取得
-
C#で、ContextMenuStripに動的...
-
Vb.netのグローバル変数の宣言...
-
ジェネレーターの作り方
-
Linux バイナリ実行できない "...
-
ActiveXobjectが作成できない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jQueryの :not() .not() が有効...
-
処理前の「お待ちください」
-
jslintのエラーについて質問
-
XMLHttpRequestでキャッシュを...
-
クリックすると上に開くアコー...
-
コードをスマートにさせたい。
-
関数名をテキストから読み込む...
-
jqueryの変数を関数の外に出す方法
-
シューティングゲームの作り方
-
要素名がスペースを含む場合のj...
-
getElementByIdを使用したグロ...
-
XMLHttpRequestオブジェクトが...
-
jQueryが読み込めない
-
Ajaxでデータベース(PostgreSQL)
-
setTimeoutで、止まらない
-
jQueryでzipを解凍読み込みする...
-
CDの曲をケータイのSDに移す
おすすめ情報