JQuery链接悬停效果代码精简

Question

我想知道压缩这些代码行所需的方法。基本上，当您将鼠标悬停在图像上时，其下方的文本图像会淡入和淡出。

        $("#2").hover(function(){
            $('#two').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#two').stop().animate({"opacity": 0}, 600);
        });
        $("#4").hover(function(){
            $('#one').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#one').stop().animate({"opacity": 0}, 600);
        });
        $("#5").hover(function(){
            $('#three').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#three').stop().animate({"opacity": 0}, 600);
        });
        $("#6").hover(function(){
            $('#four').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#four').stop().animate({"opacity": 0}, 600);
        });

预先非常感谢您！

Answer 1

悬停物体和动画物体之间的关系
看起来有点随机，所以你可能不得不使用一个简单的映射
表。

var id_map = {
    '2': 'two',
    '4': 'one',
    '5': 'three',
    '6': 'four'
};

$('#2, #4, #5, #6').hover(
    function() { $('#' + id_map[this.id]).stop().animate({opacity: 1}, 600); },
    function() { $('#' + id_map[this.id]).stop().animate({opacity: 0}, 600); }
);

您还可以使用数据将 id_map 放在源元素上
属性。 HTML 看起来像这样：

<div id="2" data-target="two"  >...</div>
<div id="4" data-target="one"  >...</div>
<div id="5" data-target="three">...</div>
<div id="6" data-target="four" >...</div>

和 jQuery：

$('#2, #4, #5, #6').hover(
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 1}, 600); },
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 0}, 600); }
);

如果将一个类附加到 #2、#4、... 元素，那么您可以简化选择器：

$('.someClass').hover(
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 1}, 600); },
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 0}, 600); }
);

顺便说一句，使用所有数字 id 属性是一个坏主意，它们应该以字母开头。

Answer 2

如果您为每个适用的 HTML 元素指定一个类，例如 ，那么您可以执行以下操作：

 $(".fade-on-hover").hover(function(){
    $(this).stop().animate({"opacity": 1}, 600);
 },function(){
    $(this).stop().animate({"opacity": 0}, 600);
 });

编辑：

我最初错过了您没有使图像本身褪色，因此如果您使用的是 HTML5 和 jQuery 1.4.3 或更高版本，您可以执行以下操作：

HTML：

 <img id="image-one" class="fade-on-hover" data-hoverelement="text-one" />

Javascript：

 $(".fade-on-hover").hover(function(){
    $('#' + $(this).data('hoverelement')).stop().animate({"opacity": 1}, 600);
 },function(){
    $('#' + $(this).data('hoverelement')).stop().animate({"opacity": 0}, 600);
 });