Question

我的代码在中途运行

jQuery('#checkbox').click(function () {
   jQuery('.cssBox').animate({height:'+=50px'}, 500);
   jQuery('#extra').toggle(this.checked);
});

现在，当选中复选框时，cssbox会变大，但是当未选中时，cssbox会继续变大。如何解决这个问题，以便在未选中时恢复到原始大小？

Answer 1

尝试以下内容，

jQuery('#checkbox').click(function () {
   jQuery('.cssBox').animate({height: ((this.checked)?'+=50px':'-=50px')}, 500);
   jQuery('#extra').toggle(this.checked);
});

Answer 2

使用change代替click（否则通过并使用空格键会绕过您的代码）。另外，根据checked状态应用动画：

jQuery('#checkbox').change(function(){
  jQuery('.cssBox').animate({
    height: this.checked   // is it checked?
      ? '+=50px'              // yes, increase by 50px
      : '-=50px'              // no, decrease by 50px
  },500);
  jQuery('#extra').toggle(this.checked);
});

Answer 3

$(function(){
    var isSmall=true;
    $('#checkbox').click(function () {
        if(isSmall)
        {
           $('.cssBox').animate({height:'+=50px'}, 500);
        }
        else            
        {
           $('.cssBox').animate({height:'-=50px'}, 500);
        }
       isSmall=!isSmall;
    });        
});

示例：http://jsfiddle.net/2nU7b/4/

jquery检查/取消选中事件触发器

3 个答案: