0

いくつかdivの を制御するコードが少しありますが、別のリンクでの小さな変更のためだけに何度も繰り返されます

クリック#Option1すると2-5が0に縮小し（いずれかが開いている場合）、不透明度が0になり、2をクリックすると不透明度が0になり（1と残りが折りたたまれます）、より一般的なものにする良い方法が思いつきませんしかし、方法がなければなりません

$('#Option1').click(function() {
      var ele = $('#Option1Div');
      ele.animate({
               opacity    : .75,
               width      : '602px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option2Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option3Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option4Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option5Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
});
4

3 に答える 3

0

これを試すことができます

  $('#Option1 , #Option2 ,#Option3 , #Option4 , #Option5').click(function() {
    var ele = $('#' + this.id + 'Div');
    ele.animate({
        opacity: .75,
        width: '602px'
    }, 5000, function() {
        // Animation complete.
    });

    $('[id^="Option"][id$="Div"]').not(ele).animate({
        opacity: 0.1,
        width: '0px'
    }, 5000, function() {
        // Animation complete.
    });
});
于 2012-10-04T03:13:31.167 に答える
0

技術的には、アニメーションの不透明度、幅、および最終的には持続時間の値が異なるため、純粋に一般的な仕事を行うことはできません。

ただし、配列内のすべての変更データを分離し、次のような汎用コードを適用できます。

    var opacities = [0.75, 0.1, 0.1, 0.1, 0.1];
    var widths = [602, 0, 0, 0, 0];
    var durations = [500, 500, 500, 500, 500];
    var callbacksComplete = [cb1, cb2, cb3, cb4, cb5];

    $('#Option1').click(function() {

        // Assume that 3 arrays have the same size !
        for(var i = 0 ; i < opacities.length ; i++)
        {
            $('#Option' + i + 'Div').animate({
                'opacity' : opacities[i],
                'width' : widths[i]
            }, durations[i], callbacksComplete[i]);
        }
    }
于 2012-10-04T04:05:45.693 に答える
0

オプションに のクラスをoptions指定し、div に のクラスを指定するとoption-divs、次のようなものを使用できます。

$('.options').click(function() {
    var element = $('.option-divs').eq($(this).index());

    element.stop().animate({
        opacity: .75,
        width: '602px'
    }, 5000).siblings().stop().animate({
        opacity: 0.1,
        width: '0px'
    }, 5000);
});​
于 2012-10-04T03:13:18.803 に答える