Подсветка активных элементов с помощью jQuery - PullRequest
Новая
       17

Подсветка активных элементов с помощью jQuery

2 голосов
/ 27 мая 2009

Итак, у меня есть неупорядоченный список, и я бы хотел, чтобы jQuery выделил активную ссылку в этом списке. У меня есть анимация в списке для mouseenter и mouseleave, которая увеличивает размер шрифта при наведении ссылки.

Я могу заставить ссылки оставаться в увеличенном размере и цвете, используя .unbind на mouseleave, но когда я пытаюсь повторно связать ссылку, ссылки теряют всю свою подсветку.

Вот мой код: 

$(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');
    });
}

Любая помощь с этим будет принята с благодарностью. Заранее спасибо за любые предложения!

Chris

Ответы [ 2 ]

1 голос
/ 27 мая 2009

Изменение 

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

до 

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

Это самое простое изменение, оставляющее большую часть вашего кода без изменений. Вы можете проверить живую функцию jquery, чтобы привязать функции к определенным классам и позволить jquery обрабатывать события. Также обратите внимание на то, как вы можете использовать цепочку, чтобы сделать ваш код меньше и легче для чтения.

События JQuery / документация в реальном времени

0 голосов
/ 27 мая 2009

Я понял это! Я не получил это с живой функцией, и, вероятно, есть гораздо лучший способ сделать это.

Вот исходный код, который я изменил: 

$('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');
});
...