How Can I Add Animate Effect For Scrolling Right And Left On Button Click?

I'm new in jQuery and encoutering this problem.In my document.ready function .animate() effect is not working on when the click event which i have applied on links occurs,so it is

Solution 1:

Try this:

<div style="width:1050px">
<div style="float:left;">
    <a class="abc" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle">PREV</a>
</div>

    <div style="width:1220px;float:left">
        <ul class="images" id="scroller">
            <li class="list"><img src="http://placehold.it/350&text=TEST1" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST2" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST3" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST4" class="image" alt="anuj"  width="200"/></li>     
        </ul>
    </div>

<div style="float:left;">
    <a class="def" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle;">NEXT</a>
</div>

$("a.abc").click(function() {
    $(".images").each(function(){
        $(this).animate({"margin-left":"-=204px"},800)  
            });
});

$("a.def").click(function() {
            $(".images").each(function(){
                $(this).animate({"margin-left":"+=204px"},800)
            });
});

see at: http://jsfiddle.net/MMyGE/