jQuery를 사용하여 활성 요소 강조 표시

Question

그래서 jQuery에서 해당 목록의 활성 링크를 강조 표시하려는 정렬되지 않은 목록이 있습니다. mouseover와 mouseleave에 대한 목록에 애니메이션이있어서 링크가 움직일 때 글꼴 크기가 커집니다.

나는 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'); 
});