jQuery 隐藏幻灯片弄乱元素位置

Question

代码示例位于:http://jsbin.com/dadih/43

我希望能够单击"is"或“否”并且在第二组按钮出现之前不单击另一个按钮幻灯片隐藏。

隐藏动画开始后，看起来未单击的按钮换行到下一行，我不明白为什么。

一如既往地感谢您的帮助。

Answer 1

你的按钮需要 float :

HTML:

<div class="buttons">   

  <button class="response" id="r1">Yes</button>
  <button class="response" id="r2">No</button>

  <button class="result">Resolved</button>
  <button class="result">Not Resolved</button>

</div>

CSS:

.result{
   display:none;
}

button{
   /*display:inline;*/
   height:30px;
   float:left;
   margin-right:5px;
}

.buttons{
   width:100%;
   overflow:hidden;
}

jQuery:

//$(function() {
    $('#accordion').accordion();
//});

$('.response').click(function() {
   var currentButton = "#" + this.id;

   $('.response').not(currentButton).hide("slide", { direction: "left" }, 200, function(){      
       $('.result').css("display","inline-block");      
       $(currentButton).css("background","dimgrey"); 
   }); 
});

运行示例:http://jsbin.com/fetux/1