Отключить (nxt / prv) кнопки, если больше нет фото

Question

Я уже задавал тот же вопрос здесь после этого, я придумал этот код:

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").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>

со мной все в порядке, но посмотрите на демо-версию

http://jsfiddle.net/bm4G4/

вы видите, что кнопки nxt и prv отключены, но не сразу после того, как набор картинок закончен!Вы должны нажать кнопку еще раз, чтобы отключить ее,

Как я могу немедленно отключить эти кнопки?

спасибо

Answer 1

http://jsfiddle.net/bm4G4/1/
и вы действительно должны изменить направление анимации, то, как она сейчас сбивает с толку.

$("#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");
    }
});

Answer 2

Это должно сделать это

$("#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");
}
});