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 属性是 a bad idea，它们应该以字母开头。

Answer 2

如果你给每个适用的 HTML 元素一个类，例如<img class="fade-on-hover" />，那么你可以这样做：

 $(".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);
 });