アクティブな要素をjQueryで強調表示

Question

したがって、jQueryにそのリストのアクティブなリンクを強調表示させたい順序のないリストがあります。私は、リンクが上がったときにフォントサイズを増やすmouseenterとmouseleaveのリストのアニメーションを持っています。

マウスリーブで.unbindを使用すると、リンクのサイズや色を増やすことができますが、リンクを再バインドしようとすると、リンクの強調表示がすべて失われます。ここで

は、これまでの私のコードです：

$(document).ready(function() { 
    slide("#sliding-navigation", 22, 17, 175, .8); 
}); 

function slide(navigation_id, font_out, font_in, time, multiplier) { 
    // Creates the target paths 
    var list_elements = navigation_id + " li.sliding-element"; 
    var link_elements = list_elements + " a"; 

    // Initiates the timer used for the initial sliding animation 
    var timer = 0; 

    // Create the beginning slide animation 
    $(list_elements).each(function(i) { 
    // updates timer 
    timer = (timer*multiplier + time); 
    $(this).animate({ marginLeft: "0" }, timer); 
    $(this).animate({ marginLeft: "15px" }, timer); 
    $(this).animate({ marginLeft: "0" }, timer); 
    }); 

    // Creates the hover effect 
    $(link_elements).each(function(i) { 
    $(this).mouseenter(function() { 
     $(this).animate({ fontSize: font_out }, 200); 
    }), 
    $(this).mouseleave(function() { 
     $(this).animate({ fontSize: font_in }, 400); 
    }), 
    // Highlights active link  

    $('a').click(function() { 
     $('a.active').bind('mouseleave'); 
     $('a.active').addClass('inactive'); 
     $('a.active').removeClass('active'); 
     $(this).removeClass('inactive'); 
     $(this).addClass('active'); 
     $(this).unbind('mouseleave'); 
    }); 
} 

これで任意の助けいただければ幸いです。事前に感謝の意を表します！

クリス

Answer 1

そのままあなたのコードの大部分を残して、最も簡単な変更をISS

$('a.active').mouseenter(function() { 
     $(this).animate({ fontSize: font_out }, 200); 
    }).mouseleave(function() { 
     $(this).animate({ fontSize: font_in }, 400); 
    }), 

に変更

$('a.active').bind('mouseleave'); 

。特定のクラスに関連付けられた関数を作成し、jqueryにイベントを処理させるために、jqueryのライブ関数をチェックアウトすることができます。また、コードを小さくして読みやすくするためにチェーンを使用する方法にも注意してください。

JQuery Events/live documentation

Answer 2

私はそれを理解しました。私はライブ機能でそれを手に入れませんでしたし、おそらくもっと良い方法があります。このコードでは

$('a').click(function() { 
    $('a.active').bind('mouseleave'); 
    $('a.active').addClass('inactive'); 
    $('a.active').removeClass('active'); 
    $(this).removeClass('inactive'); 
    $(this).addClass('active'); 
    $(this).unbind('mouseleave'); 
}); 

：

$('a').click(function() { 
    $('a').animate({ fontSize : font_in }, 0); 
    $(this).animate({ fontSize : font_out }, 0); 
    $('a.active').mouseenter(function() { 
     $(this).animate({ fontSize: font_out }, 200); 
    }).mouseleave(function() { 
     $(this).animate({ fontSize: font_in }, 400); 
    }), 
    $('a.active').addClass('inactive'); 
    $('a.active').removeClass('active'); 
    $(this).removeClass('inactive'); 
    $(this).addClass('active'); 
    $(this).unbind('mouseleave mouseenter'); 
});