Jquery slide problem. can anyone help.

Question

i create a jquery slide which i want the 2 picture 1 slide in from left and other 1 slide in from right. Finally the picture can slide in from left but cant slide in form left. izit anything wrong of my code?? Any suggestion??

<script type="text/javascript">
   $(document).ready(function() {
  $('.slideshow').cycle({ 
    fx: 'custom', 
    cssBefore: {  
        top:  0, 
        left: 0, 
        width: 0, 
        height: 0,  
        zIndex: 1  
    }, 
    animIn:  {  
     right: 0,
        width: 200, 
        height: 200  
    }, 
    animOut: {  
        top:  200, 
        left: 200, 
        width: 0, 
        height: 0 
    }, 
    cssAfter: {  
        zIndex: 0  
    }, 
    delay: -1000 
});
    $('.slideshow2').cycle({ 
    fx: 'custom', 
    cssBefore: {  
        top:  0, 
        left: 0, 
        width: 0, 
        height: 0,  
        zIndex: 0  
    }, 
    animIn:  {  
        width: 200, 
        height: 200  
    }, 
    animOut: {  
        top:  200, 
        right: 200, 
        width: 0, 
        height: 0 
    }, 
    cssAfter: {  
        zIndex: 0  
    }, 
    delay: -1000 
});
});
</script>

Answer 1

Is this the effect you are looking for?

$(document).ready(function() { 
  $('.slideshow').cycle({ fx: 'custom', cssBefore: {top:0,left:0,width:0,height:0,zIndex: 1},  
    animIn:  {right:0,width:240,height:160},  
    animOut: {top:0,left:0,width:0,height:0},  
    cssAfter: {zIndex:0},  
    delay: -1000 }); 
  $('.slideshow2').cycle({ fx: 'custom', cssBefore: {top:0,left:240,width:0,height:0,zIndex:0},  
    animIn:  {left:0,width:240,height:160},  
    animOut: {top:0,left:240,width:0,height:0},  
    cssAfter: {zIndex:0},  
    delay: -1000 }); 
});

I changed the code so that the .slideshow2 elements, start with their left side at 100% of their actual width, 240px in this case. The animIn changes the left to 0 and animOut changes it back to 240. This causes the image to appear to grow from the right of the containing box.