JQuery Cycle Slides overlap

When I use JQuery to make a custom picture slideshow the pictures are shown outside the defined area/div. I want the current picture in the div-tag to slide down and out of div-tag and the new picture to slide in from the right. I want all the action to happen inside the div-tag. Just like the example "s4" from malsup.com (http://jquery.malsup.com/cycle/adv.html). I have made this example to show the problem:

Head-part of the html:

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

   <script type="text/javascript"> 
      $('.slideshow01').cycle({
          fx: 'custom',
          sync: 0,
          cssBefore: {
              top:  0,
              left: 250,
              display: 'block'
          },
          animIn:  {
              left: 0
          },
          animOut: {
              top: 188
          },
          delay: -1000,
          pause: 1
      });
   </script>

Body-part of the html:

    <div style="width:250px; height:188px; border:solid 10px #ffffff; ">
        <div class="slideshow01">
            <img src="img/001.gif" />
            <img src="img/002.gif" />
            <img src="img/003.gif" />
         开发者_高级运维   <img src="img/004.gif" />
            <img src="img/005.gif" />
            <img src="img/006.gif" />
            <img src="img/007.gif" />
        </div>
    </div>

You need to set the overflow to be hidden on the parent element. Eg:

    <div style="width:250px; height:188px; border:solid 10px #ffffff; overflow: hidden">

Using inline styles isn't the best of practices either, have a look into external stylesheets :)