Set visible object when element is clicked

I have this simple code to animate horizontal scroll!

<script type="text/javascript">
$(document).ready(function() {

    $('#next').click(function() {
        $('body').stop().animate({scrollLeft:"+="+500},1000); 
    });

    $('#prev').click(function() {
        $('body').stop().animate({scrollLeft:"-="+500},1000 );
    });
});
</script>

<li id="next"><a href="#" class="forward" style=" position:fixed">Next</a></li>
<li id="prev"><a href="#" class="back" style=" position:fixed; visibility: hidden;">Previou开发者_如何转开发s</a></li>

I need to set the element #prev visible when #next element is clicked.

Ideas??

$('#next').click(function() {
        $('body').stop().animate({scrollLeft:"+="+500},1000);
        $('#prev a').show();
    });

Also, change your CSS to display:none instead of the visibility tag.

Since the style is declared the <a/> simply target by #id a

$('#next').click(function() {
    $("#prev a").css('visibility','visible');
    $('body').stop().animate({
        scrollLeft: "+=" + 500
    }, 1000);
});

$('#next').click(function(){
   $('#prev a').css('visibility','visible');
});