0

私は、リストを取り、各項目をボタンのように機能する div に配置するナビゲーション プラグインに取り組んでいます。標準のドロップダウン メニューに似ています。

私の問題は関数 setFocus() にあります。これは、選択された div を取り、hover/mouseOver/mouseEnter 関数を追加します。

3つすべてを試して、それらすべてで同じ問題があるため、3つすべてをリストします. 関数内で気付いた場合は、現在、マウスが div に入ったときに「over」というテキストで警告するように設定しています。

何らかの理由で、これはカーソルが div に入ったかどうかに関係なく実行されます。ページが読み込まれると、カーソルがウィンドウ スペース内になくても、カーソルが div に入ったかのようにアラートが発生し、div にカーソルを合わせても mouseLeave は応答しません。他の誰かがこれに似た問題を抱えていますか? 私は困惑しています。

http://jsfiddle.net/cFEdb/5/

 var divCode = String();


 //grab each list item and put it in its own div

 $('#nav li').each(function() {
     divCode += "<div>" + $(this).html() + "</div> ";
 });


 //get rid of the list and replace it with a plane ol' div
 //then fill that it with our new "button" divs 

 $('#nav').replaceWith('<div id="newNav"> </div)');
 $('#newNav').html(divCode);


 //add some functionality to the divs

 $('#newNav div').addClass('fader')
                 .each(function() {

             if ($(this).css('position')!='relative' || $(this).css('position')!='absolute'){
                 $(this).css('position','relative');
             }       
         })
         .css('cursor', 'pointer')
        .click(function() {                        
            switchDivs($(this));
        });


 //set the min-height of the nav div
 $('#newNav').css('minHeight', $('#newNav').height());

 setFocus($('#newNav div').first());

 $('.fader').hide();

 function fadeOn(speed) {

     $('.fader').fadeTo(speed, 100);
     alert('over');
 }

 function fadeWipe(speed) {

     $('.fader').fadeTo(speed, 0);
     alert('out');
 }

 function setFocus(obj) {

     obj.removeClass('fader')
        .addClass('focus')
        .css('backgroundColor', 'red')
       .hover(fadeOn(500),fadeWipe(500));
 }

 function switchDivs(obj2) { //obj2 is the object to become the focus div

    var obj1 = $('.focus');

    //if the two objects are the same, quit
    if (obj1.text() == obj2.text()) { 
        return;
    }

    var oneOff = obj1.offset();
    var oneDirectionY = "-"; //lol...one direction

    var twoOff = obj2.offset();
    var twoDirectionY = "-"; 

    var movementTotalY = 0;

    if (oneOff.top <= twoOff.top) {
        oneDirectionY = "+";
        movementTotalY = twoOff.top - oneOff.top;
    } else {
        twoDirectionY = "+";
        movementTotalY = oneOff.top - twoOff.top;
    }

    var oneDirectionX = "-"; //lol...one direction
    var twoDirectionX = "-";

    var movementTotalX = 0;

    if (oneOff.left <= twoOff.left) {
        oneDirectionX = "+";
        movementTotalX = twoOff.left - oneOff.left;
    } else {
        twoDirectionX = "+";
        movementTotalX = oneOff.left - twoOff.left;
    }

    obj1.animate({ top : oneDirectionY+"="+movementTotalY+"px",
               left : oneDirectionX+"="+movementTotalX+"px"
             },1500);

    obj2.animate({ top : twoDirectionY+"="+movementTotalY+"px",
               left : twoDirectionX+"="+movementTotalX+"px"
             },1500);

    //remove focus from object 1
    obj1.removeClass('focus')
                .addClass('fader');


    //add focus to object 2
    obj2.removeClass('fader')
                .addClass('focus');

 }

}); </p>

4

1 に答える 1

0 
setFocus($('#newNav div').first());

この行は、JavaScript が解析されているとき、つまりすぐに実行されます。mouseEnter/Leave コードもこれを行いますが、setFocus() が呼び出されると警告が表示されます-最後から 2 番目の行です。

質問に対する上記の修正後の回答：

フェードオン/ワイプ関数を呼び出すために使用した jQuery.hover() 関数は、それらをホバー イベントにアタッチする代わりに実行します。

ホバー コールバックは、フローがそのポイントに到達したときに実行されないように、クロージャー内にある必要があります。

    function setFocus(obj) {
        obj.removeClass('fader')
        .addClass('focus')
        .css('backgroundColor', 'red')
        .end()
        .hover(function() {
                fadeOn(500);
               }, 
               function() {
                fadeWipe(500);
               });
    } ​

注: .css()は文字列を返すため、jQuery.css() 呼び出しの後に jQuery.end ()を追加しました。ホバー イベントを文字列ではなく jQuery オブジェクトにバインドする必要があります。.css() を呼び出した他のオカレンスを見つけて、これを確認します。

アラートは、fadeOn/Wipe 関数が呼び出されたときではなく、要素がフェード アニメーションを完了した後に実行されるように、クロージャーでも呼び出す必要があります。

    function fadeOn(speed) {
        $('.fader').fadeTo(speed, 100, function() {
            alert('over');
        });
    }​
于 2012-11-23T20:19:43.327 に答える