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 回答