希望压缩我的 Jquery 动画脚本答案

【问题标题】：Looking to condense my Jquery Animation Script希望压缩我的 Jquery 动画脚本
【发布时间】：2011-05-04 02:13:58
【问题描述】：

我有一个运行正常的 jquery 动画脚本，但是，我觉得有一种方法可以减少脚本的总体开销。这是开发页面的链接：

http://dev.abinstallations.com

动画有两个部分，这些动画适用于六个单独的 div 元素。一个单独的脚本应用于每个元素。例如：

//First
$("#first_flip").hide();
$("#first_button_show").click(function(){
  $('#first_flip').animate({
     opacity: 'toggle',
     top: '+=524',
     height: 'toggle'}, 600, function() {
       // Animation complete.
  });
});
$("#first_button_hide").click(function(){
  $('#first_flip').animate({
     opacity: 'toggle',
     top: '-=524',
     height: 'toggle'}, 400, function() {
       // Animation complete.
  });
});

//Second
$("#second_flip").hide();
$("#second_button_show").click(function(){
  $('#second_flip').animate({
     opacity: 'toggle',
     top: '+=524',
     height: 'toggle'}, 600, function() {
       // Animation complete.
  });
});
$("#second_button_hide").click(function(){
  $('#second_flip').animate({
    opacity: 'toggle',
    top: '-=524',
    height: 'toggle'}, 400, function() {
      // Animation complete.
  });
});

...其余四个元素以此类推。有没有一种简洁的方法来实现这一目标？

【问题讨论】：

您发布的链接已失效.. 由于所有按钮的代码都相同，因此应该能够将其压缩为一次，但我们需要先查看 html..
Gaby - 感谢您的关注。新链接是 dev.abinstallationsinc.com

标签： jquery animation overhead

【解决方案1】：

你可以把它作为一个函数拉出来：

Hook("first");
Hook("second");

function Hook( id )
{
    $("#" + id + "_flip").hide();
    $("#" + id + "_button_show").click(function(){
      $("#" + id "_flip").animate({
         opacity: 'toggle',
         top: '+=524',
         height: 'toggle'}, 600, function() {
           // Animation complete.
      });
    });
    $("#" + id + "_button_hide").click(function(){
      $("#" + id + "_flip").animate({
         opacity: 'toggle',
         top: '-=524',
         height: 'toggle'}, 400, function() {
           // Animation complete.
      });
    });
}

或者甚至让函数接受几个参数并循环它们。

【讨论】：