jquery slideshow/cycle with easing not working

Question

Here is my code, for some reason it isn't working when I add the easing option.

It works fine with 'fade'.

<script src="jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="jquery.cycle.all.min.js" type="text/javascript"></script>

    <style>
        .pics {  
    height:  383px;  
    width:   582px;  
    padding: 0;  
    margin:  0;  
} 

.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  550px; 
    height: 350px; 
    top:  0; 
    left: 0 
} 
    </style>
    <div id="cycle" class="pics">
        <img src="/images/1.png" width="550" height="350" />
        <img src="/images/2.jpg"  width="550" height="350"/>
    </div>
     <script type="text/javascript">
         $().ready(function() {

         $('#cycle').cycle({
             fx: 'scrollDown',
             easing: 'bounceout',
             delay: -2000
         });

         });
    </script>

Is there something else I have to do, to tell the cycle plugin I have easing?

Answer 1

Try $.easing.bounceout instead of "bounceout".

Actually, looking over that easing plugin, it looks like all the easing names are different. There seems to be a compatibility addon for the easing plugin that lets you say "bounceout" instead of "easeOutBounce".