CODEWITHSUNDEEP
jqueryjsfanimsition
Manel Chaabene
Manel Chaabene

Reputation: 177

Uncaught TypeError: jQuery(...).animsition is not a function

I'm trying to make effect in my page using Animsition plugin but that does not work. Here is my code:

<h:head>
<h:outputStylesheet library="css" name="bootstrap.min.css"></h:outputStylesheet>
 <h:outputStylesheet library="css" name="sandbox.css"></h:outputStylesheet>
</h:head> 
<h:body> 
  <div class="animsition">

    <div class="item bg-yellow">
      <h1>Animsition: Sandbox</h1>
    </div>
    <h2>Defaults</h2>
    <h2>Overlays</h2>
    <ol>
      <li><a class="animsition-link" href="overlay1.html">Overlay1</a></li>
      <li><a class="animsition-link" href="overlay2.html">Overlay2</a></li>
    </ol>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

 <h:outputScript library="assets/jquery" name="animsition.min.js" target="head"></h:outputScript>
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('.animsition').animsition({
      inClass:'zoom-in-sm',
      outClass:'zoom-out-sm'
    })
    .one('animsition.inStart',function(){
        jQuery(this).append('<h2 class="target">Callback: Start</h2>');
      console.log('event -> inStart');
    })
    .one('animsition.inEnd',function(){
        jQuery('.target', this).html('Callback: End');
      console.log('event -> inEnd');
    });
  });
        </script>
</h:body>

knowing bootstrap.min.css, sanbox.css are under webapp/resources/css. And animsition.min.css is under webapp/assets/jquery

Upvotes: 1

Views: 6632

Answers (0)

Related Questions