0

クリックすると、グループを非表示にして次のグループを表示するアニメーションをトリガーするラジオ ボタンのグループがあります。私が抱えている問題は、選択がユーザーに表示される前にアニメーションが実行され、混乱する可能性があることです。したがって、画面が選択を再描画するのを待ってから、次のグループへの遷移をアニメーション化したいと思いますが、これを行うためのエレガントな方法をまだ見つけていません。

効果を表示するフィドル ( http://jsfiddle.net/DPnXB/ ) を作成しました。便宜上、ここにも Javascript と html を追加します。

function init(){
  $(".panel.first").addClass("focus");
  $("input:radio").on("click", animate);
}
init();

function animate(){
  var currentPanel, nextPanel;

  currentPanel = $(this).parents(".panel");
  nextPanel = $(".panel").not(".focus").first();

  nextPanel.css({opacity: 0}).addClass("focus");
  currentPanel.removeClass("focus");
  nextPanel.animate({opacity: 1}, 300); 
}

<div class="panel first">
  First panel
  <label><input type="radio" name="radioGroup1"/> option 1 </label>
  <label><input type="radio" name="radioGroup1"/> option 2 </label>
  <label><input type="radio" name="radioGroup1"/> option 3 </label>
</div>
<div class="panel last">
  Last panel
  <label><input type="radio" name="radioGroup2"/> option 1 </label>
  <label><input type="radio" name="radioGroup2"/> option 2 </label>
  <label><input type="radio" name="radioGroup2"/> option 3 </label>
  <label><input type="radio" name="radioGroup2"/> option 4 </label>
</div>
4

1 に答える 1

1

「エレガントな」方法はないと思います。他に役立つイベントはありません。そのため、アニメーションを開始する前の短いタイムアウトが最善の策だと思います。

http://jsfiddle.net/DPnXB/2/

現在のパネルを選択する方法を変更したことに注意してください。animate関数のスコープがinput要素ではなくwindowオブジェクトになるため、これは必要でした!

万が一の場合に備えて、2 つ以上のグループを正しく処理できるように、少し修正したバージョンを次に示します。

http://jsfiddle.net/DPnXB/3/

于 2013-01-13T23:06:55.290 に答える