Question

大家好，我想知道是否有其他方式以更紧凑的格式编写以下查询。下面你可以看到我的代码。

$('footer').mouseover(function(){
    $(this).stop().animate({height:90}, 750);
        $('#up').stop().animate({opacity:0},450);
        $('#link-container').stop().animate({opacity:1},750);
        });
$('footer').mouseout(function(){
    $(this).stop().animate({height:22}, 750);
        $('#up').stop().animate({opacity:1},450);
        $('#link-container').stop().animate({opacity:0},750);
        });

Answer 1

您可以将代码重构为一个函数，该函数接受不同值的参数：

function anim(e, h, op) {
  $(e).stop().animate({height:h}, 750);
    $('#up').stop().animate({opacity:op},450);
    $('#link-container').stop().animate({opacity:1-op},750);
}

然后链接两个绑定：

$('footer').mouseover(function(){
  anim(this, 90, 0);
}).mouseout(function(){
  anim(this, 22, 1);
});

Answer 2

你可以链接函数绑定：

$('footer').mouseover(function(){
    $(this).stop().animate({height:90}, 750);
        $('#up').stop().animate({opacity:0},450);
        $('#link-container').stop().animate({opacity:1},750);
}).mouseout(function(){
    $(this).stop().animate({height:22}, 750);
        $('#up').stop().animate({opacity:1},450);
        $('#link-container').stop().animate({opacity:0},750);
});

jquery代码使得更紧凑

2 个答案: