如果没有更多的图片，请禁用(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按钮被禁用，但不是在pics集完成后立即禁用！你应该再点击一次按钮来禁用它，

如何立即禁用这些按钮？

感谢

Answer 1

这应该是

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

Answer 2

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