Disable (nxt/prv) buttons if there is no more pics

I already asked same question here after that i came up with this code :

css

div#big_container{
margin:0;
padding:30px;
width: 230px;
height: 130px;
border:1px solid #f0f0f0;
background-color: #f0f0f0;
text-align: center;
z-index:-100;
}

div#container{
overflow: hidden;
width: 207px;
background-color: #f0f0f0;
}

div#content {
position:relative;

}

button#left{
position:absolute;
top:90px;
left:2px;
z-index:1;
}

button#right{
position:absolute;
top:90px;
left:246px;
z-index:1;
}

jquery

var size =  $("#content table"开发者_如何学JAVA).find('tr').first().find('td').size();
var position = 1;

    $("#left").click( function() {
    if(position < (size / 2)) {
        $('#right').removeAttr('disabled');
        $("#content").animate({"right": "+=198px"}, "fast");
         position ++;
    }else{
       $('#left').attr("disabled", "true");
    }
    });


    $("#right").click( function() {
    if( position > 1) {
        $('#left').removeAttr('disabled');
        $("#content").animate({"right": "-=198px"}, "fast");
         position --;
    }else{
        $('#right').attr("disabled", "true");
    }
    });

html

<button id="left"><<</button>
<button id="right">>></button>

<div id="big_container">
<div id="container">
<div id="content">
<table border="0">
<tr>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
</tr>
<tr>
<td>Description1</td>
<td>Description2</td>
<td>Description3</td>
<td>Description4</td>
<td>Description5</td>
<td>Description6</td>
</tr>
</table>
</div>
</div>
</div>

this is ok with me but see on the live demo

http://jsfiddle.net/bm4G4/

you see that the nxt and prv buttons disabled but not immediately after the pics set finished! you should click on the button one more time to disable it,

How can i make these buttons disable immediately?

thank you

This should do it

$("#left").click( function() {
if(position < (size / 2)) {
    $('#right').removeAttr('disabled');
    $("#content").animate({"right": "+=198px"}, "fast");
     position ++;
}if(position >= (size / 2)){
   $('#left').attr("disabled", "true");
}
});


$("#right").click( function() {
if( position > 1) {
    $('#left').removeAttr('disabled');
    $("#content").animate({"right": "-=198px"}, "fast");
     position --;
}if(position == 1){
    $('#right').attr("disabled", "true");
}
});

http://jsfiddle.net/bm4G4/1/
and you should really reverse the direction of the animation, the way it's now is confusing.

$("#left").click(function() {
    $('#right').removeAttr('disabled');
    $("#content").animate({
        "right": "+=198px"
    }, "fast");
    position++;

    if (position == (size / 2)) {
        $('#left').attr("disabled", "true");
    }
});


$("#right").click(function() {

    $('#left').removeAttr('disabled');
    $("#content").animate({
        "right": "-=198px"
    }, "fast");
    position--;
    if (position == 1) {
        $('#right').attr("disabled", "true");
    }
});