Как иметь несколько экземпляров эффекта jQuery - PullRequest
Новая
       8

Как иметь несколько экземпляров эффекта jQuery

1 голос
/ 17 августа 2010

Во-первых, отказ от ответственности - Я ПРОСТО начинаю с jQuery. Я прошу прощения за мою неумелость. :)

Моя проблема заключается в том, что я пытаюсь использовать эффект ролловера jQuery для нескольких отдельных элементов на странице. Прямо сейчас, когда я наведу курсор мыши на одну из них, все они выполняют эффект сразу, потому что у них одинаковое имя класса, и jQuery выбирает их все. Я знаю, что могу использовать разные имена для каждого и написать отдельный бит jQuery для каждого класса, но есть ли лучший способ? Я планирую иметь много из этих элементов.

Так или иначе, картинка стоит тысячи слов. Проверьте источник моей тестовой страницы здесь: Нажмите здесь Наведите курсор мыши на «тестовые» изображения. Я хочу, чтобы эффект просто применялся к тому, на который вы навели курсор.

Вот мой начинающий jQuery: 

    $(document).ready(function(){

$('.box').hover(function() {
 $('.rollover').fadeIn('slow');
 $('.description').fadeIn('fast');
});

$('.box').mouseleave(function() {
 $('.rollover').fadeOut('slow');
 $('.description').fadeOut('fast');
});


});

Ответы [ 2 ]

3 голосов
/ 17 августа 2010 
$('.box').hover(function() {
   $(this).next('.rollover').fadeIn('slow');
   $(this).find('.description').fadeIn('fast');
}, function() {
   $(this).next('.rollover').fadeOut('slow');
   $(this).find('.description').fadeOut('fast');
});

Метод .hover() принимает две функции для запуска mouseenter и mouseleave.

В каждой функции ключевое слово this относится к элементу .box, который получил событие. Затем вы используете .find() для получения вложенного .description и .next() для получения соседнего брата .rollover.

В вашей ситуации вы можете использовать .siblings('.rollover') вместо .next(), если хотите.

0 голосов
/ 17 августа 2010

Если бы я мог выбирать их по одному, думаю, я мог бы применить эффект только к их детям.Я просто хотел бы, чтобы вы указали jquery, чтобы он просто выбирал мышью, без указания идентификатора или класса ...

...