JQuery Blind功能 - 30px

Question

我有一个降低和提升div的盲功能。它工作得很好，但我想这样做，以便div除了30px之外一路向下并一直打开。我该怎么做？

// * JQuery * //

    jQuery.fn.blindToggle = function(speed, easing, callback) {
      var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
      return this.animate({marginTop: parseInt(this.css('marginTop')) >0 ? 0 : +h }, speed, easing, callback);  
    };

$(document).ready(function() {
  var $box = $('#box')
    .wrap('<div id="box-outer"></div>');
  $('#blind').click(function() {
    $box.blindToggle('slow');
  });    
});

// * CSS * //

#box {
     padding: 10px;
     height: 100px;
     width: 100px;
     background: #e459e9;
     }
#box-outer {
     overflow: hidden;
     height: 120px;
     margin: 20px;
     }

谢谢！

Answer 1

这里为什么不试一试。

jQuery.fn.blindToggle = function(newHeight, speed, easing, callback) {
    return this.each(function(){with( jQuery(this) ){
        height() != newHeight ?
            data("wasHeight", height()).css("overflow","hidden").animate({height: newHeight}, speed, easing, callback)
        :
            css("overflow","").animate({height: data("wasHeight")}, speed, easing, callback).removeData("wasHeight")
    }})
};

$(function() {
  $('#blind').click(function() {
    $(this).blindToggle(30, "slow");
  });    
});