I have added a button to my Bootstrap4 navbar and I want to make it scale (grow and shrink) multiple times to grab attention. However, when I try to implement this using $(document).ready(function(){, I am encountering some unexpected behavior.
I have included the jQueryUI CDN in my HTML and confirmed that the library is loading correctly. The issue might be related to conflicting settings within my navbar or other factors affecting the desired effect. You can view the example on jsfiddle 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>