Question

我在Bootstrap4导航栏内有一个按钮。我想要几次缩放（增长和收缩，有点像从页面中弹出），以引起注意$(document).ready(function(){内部。

我的html中有jQueryUI cdn，并且我确定库可以正确加载，但是效果却很奇怪。可能是由于我的导航栏中的某些设置有冲突，但效果还没有达到我的预期。我加入了 jfiddle here

$(document).ready(function(){  
      for(i=0;i<5;i++) {
	       $( "#toggle" ).toggle({effect: "scale", percent: 2.0});
		   $( "#toggle" ).toggle({effect: "scale", percent: 1.0});
	  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-dark" style="background-color: lightslategray;">
        <a class="navbar-brand" href="#">Airforce Inventory Information Database</a>
        <button class="navbar-toggler collapsed" id="toggle" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button>
</nav>

Answer 1

我建议添加CSS类来实现此动画。这是一个使用jQuery添加类，然后使用CSS循环播放动画5次的示例：

$(document).ready(function(){  
      $( "#toggle" ).addClass('attention');
});

.attention {
  animation: zoom-in-out 0.5s ease-in-out 5;
}

@keyframes zoom-in-out {
  0% { transform: scale(1); }
  50% { transform: scale(0.5); }
  100% { transform: scale(1); } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-dark" style="background-color: lightslategray;">
        <a class="navbar-brand" href="#">Airforce Inventory Information Database</a>
        <button class="navbar-toggler collapsed" id="toggle" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button>
</nav>

jQueryUI在按钮上切换缩放效果

1 个答案: