.toggle("bounce") 使 div 消失

Question

在一个非常简单的点击工具上工作，我希望我的 divs 在点击后弹回原位，但由于某种原因，它们在执行动画后消失了。动画应该在每个 .box div 上运行，它嵌套在 #instrument div.

中

#instrument {
    height: 116px;
    width: 812px;
    padding-right: 10px;
    padding-top: 50px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

.box {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-top: 10px;
    float:left;
    border-radius: 5px;
}

这里是js代码：

$(document).ready(function(){
    $(".box").hover(function(){
        $(this).toggleClass('hover');
        });
    $(".box").click(function(){
        $(this).toggleClass('active');
        $(this).toggle("bounce", {times: 3}, "slow");
    });

这里有什么明显的错误吗？我读到有时 .toggle("bounce") 不能很好地与 css 中的边距配合，但无法对其进行调整。

Answer 1

而不是 .toggle() 使用 .effect()

$(this).effect("bounce", {times: 3}, "slow");

.toggle() 用于切换元素的 display 状态 - 因此它正在消失。

jQuery(function($) {

  $('#instrument .box').on('click', function() {
    $(this).toggleClass('active').effect('bounce', {
      times: 3
    }, 'slow');
  });

});

.box {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
  border-radius: 5px;
  background: #0bf;
}

.box:hover {
  background: #0fb
}
.box.active {
  background: #f0b
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">

<div id="instrument">
  <div class="box"></div>
  <div class="box"></div>
</div>

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

.toggle("bounce") 使 div 消失

.toggle("bounce") making div disappear

html

javascript

css

jquery

toggle