I have a simple left/right horizontal scroller. However it only works 1 time. How can I get it so it scrolls each time its clicked.

Thanks for any help offered.

<style type="text/css">
.slideHolder {border:1px solid #000; overflow:hidden; width:500px;}
.slideHolderInner {height:200px; position:relative;}
.box {background:#FC3;}
.box, .box2 {height:200px; width:100%; position:absolute; float:left;}
.box2 {background:#c00; margin-left:100%;}
</style>

<script type="text/javascript">
$(document).ready(function(){
    $ ('.next').click (function() {
    $ ('.slideHolderInner').animate ({"right" : "100%"} ,1000);   
    });
    $ ('.prev').click (function() {
    $ ('.slideHolderInner').animate ({"left" : "0%"} ,1000);       
    });
});
</script>

<a class="prev" href="#">Previous</a>
<a class="next" href="#">Next</a>

<div class="slideHolder">
    <div class="slideHolderInner"> 
        <div class="box">box 1</div>  
        <div class="box2">box 2</div>  
    </div>
</div>