title: JQuery Cycle Slides overlap
body: <p>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:</p>
  
  <p>Head-part of the html:</p>
  
  <pre><code>   &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="js/jquery.cycle.all.latest.js"&gt;&lt;/script&gt;
  
     &lt;script type="text/javascript"&gt; 
        $('.slideshow01').cycle({
            fx: 'custom',
            sync: 0,
            cssBefore: {
                top:  0,
                left: 250,
                display: 'block'
            },
            animIn:  {
                left: 0
            },
            animOut: {
                top: 188
            },
            delay: -1000,
            pause: 1
        });
     &lt;/script&gt;
  </code></pre>
  
  <p>Body-part of the html:</p>
  
  <pre><code>    &lt;div style="width:250px; height:188px; border:solid 10px #ffffff; "&gt;
          &lt;div class="slideshow01"&gt;
              &lt;img src="img/001.gif" /&gt;
              &lt;img src="img/002.gif" /&gt;
              &lt;img src="img/003.gif" /&gt;
              &lt;img src="img/004.gif" /&gt;
              &lt;img src="img/005.gif" /&gt;
              &lt;img src="img/006.gif" /&gt;
              &lt;img src="img/007.gif" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>