2009-08-06 17 views
4

私は数ヶ月前に尋ねられた質問からいくつかのコードを修正しています。一番下の行は、対応するdivをフェードインし、アンカーに「ハイライト」クラスを適用するためのアンカーにカーソルを合わせます。私は基底のJQueryを使用して "OK"の結果を得ることができますが、マウスイベントはユーザーエクスペリエンスを円滑にしません。JQuery:ここでhoverIntentが関数ではないのはなぜですか?

Google APIを使用してJQuery 1.3を読み込みます。

これはうまくいくようです。私は組み込みのhover()やmouseover()を使用することができ、fadeIn()はそのままです... JavaScriptエラーなどはありません。したがって、JQuery自体は明らかに "読み込まれています"。しかし、私は誰もが解決するように勧めているようだという問題に直面していた。hoverIntent

JQueryを読み込んだ後、hoverIntent JavaScriptを読み込みます。私はパスを三重にチェックし、パスをダミープルーフしました。私はそれが道の問題かもしれない合理的な方法を見ていない。

外部のJavaScriptは(容疑者)でロードされると、私は自分のページのスクリプトを続行:

var $old=null; 

$(function() { 
    $("#rollover a").hoverIntent(doSwitch,doNothing) 
    }); 

function doNothing() {}; 
function doSwitch() {  
     var $this = $(this); 
     var $index = $this.attr("id").replace(/switch/, ""); //extract the index number of the ID by subtracting the text "switch" from its name 
     if($old!=null) $old.removeClass("highlight"); //remove the highlight class from the old (previous) switch before adding that class to the next 
     $this.addClass("highlight"); //adds the class "highlight" to the current switch div 
     $("#panels div").hide(); //hide the divs inside panels 
     $("#panel" + $index).fadeIn(300); //show the panel div "panel + number" -- so if switch2 is used, panel2 will be shown 
     $old = $this; //declare that the current switch div is now "old". When the function is called again, the old highlight can be removed. 
     }; 

私はエラーを取得する:

Error: $("#rollover a").hoverIntent is not a function

私は動作確認済みの機能に変更した場合( ".hoverIntent"を ".hover"に変更する)、それは再び "動作します"。私はこれが基本的な質問であると確信していますが、これは(あなたが私のコードで見ることができるように)完全なハックです。

ここでは、すべての外観について、パスが間違っている(私は何百万もチェックしたことがありますが、ダブルクリックしたHTTPリンクを使って外部サイトに置いても間違っていません)か、 .jsは関数を宣言しません。後者の場合、機能を利用できるようにするには数行のコードを紛失する必要がありますが、著者のサイトでは何も見つかりませんでした。彼のソースコードでは、私もエミュレートしようとした$(document).readyを使用していますが、間違っていた可能性もあります。

もう一度、奇妙なことに、.hoverはうまく動作します.hoverIntentは動作しません。私はそれがなぜ機能とは考えられないのか理解できません。

何かが見逃されるのを避けようとしています...見てみましょう...他のJavaScriptは呼び出されていません。この投稿には、ページが使用するすべてのJavascriptが含まれています...私は作者のvar設定例(hoverIntentはまだ関数ではありません)のようにしてみました。

私は関数を宣言するために1行が欠落していますが、私の人生は何であるのか、なぜ外部の.jsファイルで宣言されていないのか理解できません。どんな洞察もありがとう! グレッグ


更新:

奇妙なことに、私はそれによ...そして実際ので、これは解決しますならば、私はhoverIntentが解決必要ないかもしれません。

私が追加"doNothing"関数に警告し、何が起きているのかを見るために単純な古い.hoverに戻します。私の5アンカーのうちの2つについては、私が動くとすぐにdoNothing()が呼び出され、警告が表示されます。他の3つの場合、doNothing()はmouseoutまで正しく呼び出されません。ご覧のとおり、「ロールオーバー」div内のアンカーにも同じ機能が適用されます。それがなぜ特別なのか分かりません。

しかし:

  1. 私はslideDown、doNothing(のような別の効果にフェードインを変更した場合は)正しくマウスアウトまで呼び出されません。
  2. fadeInを使用すると、doNothing()はOperaでは呼び出されませんが、ほかのすべてのブラウザで呼び出されるようです。

fadeIn自体がバグである可能性がありますか、それとも適切なコールバックを渡す必要がありますか?もしそうなら、私はそのコールバックがどんなものか分からない。あなたの長い注意のため

乾杯またがる...

グレッグ

+0

あなたのページに私たちを指摘できますか?または、HTMLソースコードを投稿しますか? – pixeline

+0

hoverIntent javasciptへの参照がありますか?必ず確認してください。 :) –

+0

ライブラリをロードする順序を確認してください。それは、jQuery、hoverIntent、yourCodeです。念のため。 –

答えて

1

は結局のところ、第二の問題は、2フィートだった

...私はあまりにも多くの人々の時間を無駄にしませんでしたホープ画面からも。 5要素のうち2要素しか奇妙な動作を示したのは奇妙なので、HTML/CSSと関係があると思われました。

私のコードをチェックし、友人のFireBugを掘り出して、私がロールオーバー部門をオーバーラップさせた別の部門に乗っていたことを発見しました。理由は? CSSでは、.panelの代わりに.panelsという名前を付けました。クラス名は.panelです。したがって、divのデフォルトを使用しています。 100%の幅

質問が回答されて... ...「もっと注意してください」

マットとマックは非常に多くのチェック私のコードと案の定、私は別のプラグインをロードし、私自身を挿入した後のjQueryを再読み込みに私を強制的にコード。 hoverIntentは動作させるためにJQueryのhover()を変更するので、JQueryを再読み込みするとそれが暴走します。

私はfadeIn()の奇妙さを調べるためにHTML/CSSを再検討しました。確かに、私はいくつかの混乱を招いたクラスでタイプミスがありました。

ダムダンダム...しかし今、私は寝ることができます。

関連する問題