Question

我正在处理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的延迟，但我不认为这可能与我目前编写代码的方式有关......？

Answer 1

将类添加到要悬停的各个项目，例如hoverItem。然后，您可以使用$('.hoverItem').hoverIntent(function() ...);一次设置多个项目。鉴于你给出的例子有两个不同的不透明度，我会创建两个类。

Answer 2

您可以创建一个命名函数（例如function myHover（）{}），然后在.hoverIntent中将其引用为.hoverIntent(myHover)。另外，如果希望两个ID具有相同的附加功能，请考虑使用Multiple Selector。

jQuery简化代码（初学者）

2 个答案: