未捕获的TypeError：jQuery（...）。animsition不是一个函数

Question

我尝试使用Animsition插件在我的页面中生效，但这不起作用。 这是我的代码：

<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>

知道bootstrap.min.css，sanbox.css在webapp / resources / css下。 animsition.min.css位于webapp / assets / jquery

下