101 Ways to Animate Things

Use .toggle() to show/hide with timing and easing 

<section id="show-hide-timing-easing" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="../../js/components/show-hide-timing-easing.js"></script>
 
<section id="show-hide-timing-easing" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
<script
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
<script src="{{ path '/js/components/show-hide-timing-easing.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("show-hide-timing-easing active");

    const $button = $('#trigger');
    const $box = $('#box');

    $button.click(function() {
      $box.toggle(2000, "easeInOutQuint");
    });
  });
})();
  • URL: /components/raw/show-hide-timing-easing/show-hide-timing-easing.js
  • Filesystem Path: components/02-jquery/03-show-hide-timing-easing/show-hide-timing-easing.js
  • Size: 287 Bytes
  • Handle: @show-hide-timing-easing
  • Preview:
  • Filesystem Path: components/02-jquery/03-show-hide-timing-easing/show-hide-timing-easing.hbs

No notes defined.