スライドショーへのサムネイルをホバーするとスライドされるものを、jqueryで作っています。
mouseenterで、gotoイベントを発生させ、動かしているのですが、
メニューが近くにあるので、連続されていて、マウスが離れることなく、重複して実行されてしまい、
マウスを一度離してやらないと実行されないことがあります。
調べたところ、
$(this).stop()
e.preventDefault();
eachイベントにする
等と出てきましたので、やってみましたが、効果がありません。
要素同士を個別に実行させるには、どうすればいいのでしょうか?
$("#listslide a").each(function(){
$(this).mouseenter(function(e) {
e.preventDefault();
_this.stop(true);
return $(this).stop(),_this.goto(($(e.currentTarget).attr("js-item") * 1) + 1);
}).mouseleave(function(){
return $(this).stop();
return _this.stop(true);
});
});
/*
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ANo1です。
>次のイベントが発生し、次のスライドショーでの動きが始まってしまいます。
jQueryでアニメーションを行っているのだと想像しますが、普通に処理していれば、jQueryの場合は内部でアニメーションを制御していて、次のアニメーションの要求が来ても、一旦キューに溜めて順次処理しているはずと思います。
それなので、「時間が遅れて処理される」ことはあっても、ご説明なさっているようなことは起こりにくくなっているはずなのですが。
(通常のjavascriptで記述すると、うっかりするとそのようなことも起こり得ます)
上記の時間の遅れをなくしたいなどのために、stopメソッドが用意されており、実行中のアニメーションを停止(あるいは終了状態にjump)することができるようになっていたように思います。
同様に、処理のキュー自体も操作できるようになっていたかと・・・(曖昧な記憶ですが)
>たしか、_thisはスライドショーの要素が入っていると思います
多分違うのではないかと想像します。
仮に、DOM要素(または要素のjQueryオブジェクト)だとすると、jQueryオブジェクトであればstopメソッドは備えられていますが、ご提示のスクリプトにあるgotoメソッドは素のjQueryには存在しないはずです。
オブジェクトに拡張定義などをしているのでしょうか?
想像ですが、根本的な原因はご提示のコード以外のスクリプトにあるのではないかと思います。
>他のイベントが始まるとホバーからはストップできないのでしょうか。。。。
イベントの伝搬は制御可能ですが、発生済みのイベントを取り消すことはできません。
ただし、行っているイベント処理を中断することは不可能ではありませんが、そのようにスクリプトが作成されていなければ無理です。
上にも書きましたように、jQueryのアニメーションは中断することが可能なメソッドとして作られていますので、stopメソッドなどで中断することができるのです。
※失礼ながら、質問者様の「イベント」という語句の概念が、一般的なものと少々異なるように感じます。
一般的な言葉の意味を再確認なさっておく方がよろしいかもしれません。
No.1
- 回答日時:
回答がないようなので・・・
ご提示の情報だけではさっぱりなので、多分、他の回答者さんたちもコメントしようがないのではないかと想像します。
以下も、多分に推測ばかりですが・・・
>メニューが近くにあるので、連続されていて、マウスが離れることなく、
>重複して実行されてしまい、
>マウスを一度離してやらないと実行されないことがあります。
事象が把握できません。
他の処理が同時に起きて重複しているということなのか、それとも同じ処理が繰り返して行われるという意味なのか。
「メニューが近くにあるので」とおっしゃっていますが、近いか遠いかは(多分)関係ないはずと思います。
それよりは、要素の包含関係とイベントの設定の仕方が適切でないのではないかと想像します。
どのように適切でないのかは、残念ながら、ご提示の情報からだけではわかりかねます。
>スライドショーへのサムネイル
とのことなので、サムネイル(画像は)
<ul>
<li><a><img></a></li>
~~
のような構造か
<div>
<a><img></a>
~~
のような構造だと推測しますが、ご質問文に記されている機能だけを実現するのであれば、わざわざmouseenterで取得したりeachで処理する必要もなさそうに思われます。
単に
$(サムネイル内のimg).hover( func1, func2 );
といった書式でも、十分に実現可能であると想像します。
一方で、スライドショーがどのようなものなのかわかりませんが、単なるスライドショーならmouseleaveやmoseoutでは何もしなくても良いので、over時(あるいはenter時)の処理を記すだけでも充分なはずと思います。
over時にサムネイル自体を半透明→不透明などと変えていて、outで元に戻しているといったようなことをなさっているなら別ですが、それらしい処理も見当たらないようですし。
それよりも、関係する要素に他のイベントが重複して設定されていないか(意図的に設定しているならOKです)が、ご質問の事象の原因になっているのではないかと推測します。
(ご質問の事象自体がよくわからないのと、ご提示のスクリプトで_thisがどのようなオブジェクトなのかも不明なので、上記はまったくの推測ですが・・・)
蛇足ですが、ご提示のスクリプトで
stop()やpreventDefault()の使い方にも疑問がありますので、もう一度、意味を再確認なさった方がよろしいように思います。
また、スライドショーは検索すれば多くのサンプルが見つかることと思いますので、そのあたりも参考になるのではないでしょうか。
ご回答有難うございます。
情報の提示が、適切ではなかったようで、見てくださった皆様に、混乱させていていたら、すいませんでした。
まず、スライドショーをする大きなバナーが左あり、そのサムネイルが並んで右側にあります。サムネイルをホバーするとイベントが起き、 スライドショーが動くという仕組みです。
サムネイルは並んでいるため、
ホバーで、「サムネイルを触れると、スライドショーが動いて、該当の画像を表示する」 までに、次のイベントが発生し、次のスライドショーでの動きが始まってしまいます。
stop()や、preventDefaultを、入れ込みましたが、問題は解決しません。
stopイベントや、prebentDefaultのイベントを削っても解決しません。
イベントの伝播というより、違うイベントを起こしているからでしょうか。
とりあえず、ホバーでのイベントの時間を短くして、解決はしましたが、親要素に対して行っているイベントでもなく、スライドショーという他のイベントが始まると、
ホバーからはストップできないのでしょうか。。。。
たしか、_thisはスライドショーの要素が入っていると思います。
サムネイルをホバーで動くスライドショーのプラグインは見かけなかったのですが、もしあれば方法がわかり、解決しそうです。探してみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tryの終了
-
Tomcat高負荷時の設定について
-
ファイルの排他
-
JavaScriptからJAVAクラスを呼...
-
二次元配列について
-
[Java] while(true)の意味
-
Javaでのデバッグコード削除
-
数値の定数を付ける時
-
JavaでVBのDOEVENTSと同様の処...
-
MVC C# 共通メソッドはどこに書...
-
JDBCでテーブルUPDATE後の再検...
-
FocusLostでイベント処理を中断...
-
重い処理中のアニメーションgif...
-
重い処理を行っているとGIFアニ...
-
複数のJavaプログラムでデ...
-
ラベルの表示までが異常に遅い...
-
FormatNumberで、桁数を固定に...
-
doGetとdoPostの違い
-
ProgressBarが0%から動きません
-
アコーディオンメニューをアン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tryの終了
-
Javaでのデバッグコード削除
-
Tomcat高負荷時の設定について
-
JavaScriptからJAVAクラスを呼...
-
[Java] while(true)の意味
-
数値の定数を付ける時
-
ラジオボタンの選択判定
-
JSP、サーブレットの初期処理
-
JavaでVBのDOEVENTSと同様の処...
-
JAVAからJAVASCRIPT関数を呼び出し
-
doGetとdoPostの違い
-
Delphiのマルチスレッドの割り...
-
C#で別スレッドの終了を知りたい
-
SwingUtilities.invokeLater(ne...
-
FocusLostでイベント処理を中断...
-
onBlurとonFocusの処理順序につ...
-
アコーディオンメニューをアン...
-
JAVAにおける画像のJPEG保存の...
-
Tomcatのスレッドを破棄する方法
-
C#でバックグラウンド処理から...
おすすめ情報