0

正しく機能しているjqueryアニメーションスクリプトがありますが、スクリプトの全体的なオーバーヘッドを減らす方法があるように感じます。開発ページへのリンクは次のとおりです。

http://dev.abinstallations.com

アニメーションには2つの部分があり、これらのアニメーションは6つの個別の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.
  });
});

...残りの4つの要素についても同様です。これを達成するための凝縮された方法はありますか？

4

1 に答える 1

0

関数として引き出すことができます：

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

または、関数がいくつかのパラメーターを取り、それらをループするようにすることもできます。

于 2010-11-02T18:27:08.597 に答える