JQuery упрощающий код (новичок) - PullRequest
Новая
       7

JQuery упрощающий код (новичок)

0 голосов
/ 03 июня 2010

Я справляюсь с jQuery, но повторяю код снова и снова ...

Конечно, есть простой способ написать это: 

$('#more-mcr, #more-hilton, #more-lpool').hide();


$('#mcr-hatters').hoverIntent(function() {
    $('#mcr-hilton').stop().animate({opacity: 0.4});
    $('#more-mcr').fadeIn({duration:200});
}, function() {
    $('#mcr-hilton').stop().animate({opacity: 1});
    $('#more-mcr').fadeOut({duration:200});
});

$('#mcr-hilton').hoverIntent(function() {
    $('#mcr-hatters').stop().animate({opacity: 0.4});
    $('#more-hilton').fadeIn({duration:200});
}, function() {
    $('#mcr-hatters').stop().animate({opacity: 1});
    $('#more-hilton').fadeOut({duration:200});
});

$('#lpool-hostel').hoverIntent(function() {
    $('#more-lpool').fadeIn({duration:200});
}, function() {
    $('#more-lpool').fadeOut({duration:200});
});

$('#offers-mcr').hoverIntent(function() {
    $('#offers-lpool').stop().animate({opacity: 0.4});
    $('#offers-bham').stop().animate({opacity: 0.4});
}, function() {
    $('#offers-lpool').stop().animate({opacity: 1});
    $('#offers-bham').stop().animate({opacity: 1});
});

$('#offers-lpool').hoverIntent(function() {
    $('#offers-mcr').stop().animate({opacity: 0.4});
    $('#offers-bham').stop().animate({opacity: 0.4});
}, function() {
    $('#offers-mcr').stop().animate({opacity: 1});
    $('#offers-bham').stop().animate({opacity: 1});
});

$('#offers-bham').hoverIntent(function() {
    $('#offers-lpool').stop().animate({opacity: 0.4});
    $('#offers-mcr').stop().animate({opacity: 0.4});
}, function() {
    $('#offers-lpool').stop().animate({opacity: 1});
    $('#offers-mcr').stop().animate({opacity: 1});
});

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

Ответы [ 2 ]

2 голосов
/ 03 июня 2010

Добавьте класс к различным элементам, на которые вы хотите навести курсор, например hoverItem. Затем вы можете использовать $('.hoverItem').hoverIntent(function() ...);, чтобы установить несколько элементов одновременно. Учитывая, что в приведенном вами примере определены две разные степени непрозрачности, я бы создал два класса.

0 голосов
/ 03 июня 2010

Вы можете создать именованную функцию (например, функцию myHover () {}), а затем в вашем .hoverIntent ссылаться на нее как .hoverIntent(myHover). Кроме того, рассмотрите возможность использования Multiple Selector , если вы хотите, чтобы два идентификатора имели одинаковую присоединенную функцию.

...