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); }
);

BTW，使用所有数字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); });

JQuery链接悬停效果代码缩减

2 个答案: