Подсветка при наведении миниатюр JQuery (скрытие других миниатюр) - PullRequest
Новая
       11

Подсветка при наведении миниатюр JQuery (скрытие других миниатюр)

2 голосов
/ 05 июля 2011

Я пытаюсь повторить эффект, который я нашел в http://www.rockstargames.com/lanoire/ в третьем поле. При наведении эскиза друг на друга темнеет. Чтобы реализовать это, в стандартном JavaScript я бы обработал событие onMouseOver следующим образом:

  • Получить ссылки на каждый эскиз
  • Перебирайте каждую миниатюру, кроме той, которая была наведена, и изменяйте значение непрозрачности

И я бы обработал событие onMouseOut, установив тайм-аут, после которого каждый большой палец будет сброшен.

Моя проблема в том, что я мало знаю о JQuery, и я не знаю, правильный ли мой подход. Я бы предпочел не прыгать в написании кода, чтобы в конечном итоге спорить со структурой. Есть ли у вас какие-либо предложения?

Ответы [ 3 ]

2 голосов
/ 05 июля 2011

Ваш подход правильный, однако я не вижу необходимости в тайм-ауте (если, конечно, вы не хотели его использовать)

Ваша логика выглядит примерно так: 

$("img").hover(function () {
    /* Dim everything but this img: */
    $("img").not(this).stop().animate({ opacity: 0.5 });
}, function () {
    /* animate all images back to fully visible. */
    $("img").stop().animate({ opacity: 1.0 });
});

Все изображения видны при загрузке страницы и отсутствии мыши. Изображения, которые не являются скрытыми изображениями, затемнены.

Вот рабочий пример: http://jsfiddle.net/SJ7bp/

0 голосов
/ 05 июля 2011

Дайте каждому эскизу класс (например, .thumbnail), затем используйте jQuery для установки opacity и примените к каждому событию mouseover и mouseout: 

$(".thumbnail").css("opacity", "0.5").mouseover(function() {
     $(this).css("opacity", "1.0"); 
}).mouseout(function() {
     $(this).css("opacity", "0.5");  
});

Вы можете увидеть, как это работает в этом примере скрипта .

0 голосов
/ 05 июля 2011

Вы можете использовать jquery mousenter и mouseleave для реализации одной и той же логики

step1: http://api.jquery.com/mouseenter/

step2: Используйте jquery's this иполучить детали, которые вы хотите получить для каждой записи, он получает информацию о текущем объекте, и вы можете получить все свойства.

Затем использовать свойство jquery .css, чтобы установить

свойства.step3 http://api.jquery.com/css/

...