0

jQueryを使用してこのアニメーションを元に戻す方法を知りたいのですが、次のページをご覧ください。

http://bksn.mx/TAC/

正しい方法は、「Equipo」をクリックすると、スムーズなアニメーションが表示され、これをもう一度クリックすると、アニメーションが非常にうまく戻ります。

間違った方法は、「Arquitectura」をクリックすると、スムーズなアニメーションが開始され、これをもう一度クリックすると...混乱しているように見え、アニメーションが元に戻らない...

メソッドを作成しようとしまし.toggle();たが、3回機能しませんでした。理由がわかりませんでしたが、...

Arquitecturaのスクリプトがあります：

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

必要に応じて、 「Equipo」の別のスクリプト：

$('h2#equipo').click(function() {
  $('section#team').animate({
    opacity: 'toggle',
    height: 'toggle'
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

前もって感謝します！

4

1 に答える 1

1

あなたのmarginプロパティはトグルしていません（両方の時間でアニメーション化され、ぎくしゃくした効果を与えます）：

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

それを修正する汚い方法は、インラインを含めることですif：

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: ($(this).css('margin') == 20) : 0 ? 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

別のより洗練されたソリューションが存在するかどうかはわかりません。

于 2011-10-13T23:39:38.633 に答える