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:

<divstyle="width:1050px"><divstyle="float:left;"><aclass="abc"href="javascript: void(0);"style="display:table-cell;height:155px;vertical-align:middle">PREV</a></div><divstyle="width:1220px;float:left"><ulclass="images"id="scroller"><liclass="list"><imgsrc="http://placehold.it/350&text=TEST1"class="image"alt="anuj"width="200"/></li><liclass="list"><imgsrc="http://placehold.it/350&text=TEST2"class="image"alt="anuj"width="200"/></li><liclass="list"><imgsrc="http://placehold.it/350&text=TEST3"class="image"alt="anuj"width="200"/></li><liclass="list"><imgsrc="http://placehold.it/350&text=TEST4"class="image"alt="anuj"width="200"/></li></ul></div><divstyle="float:left;"><aclass="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/