fadeout小孩然后动画div的高度

Question

我试图让一个div的孩子淡出，然后动画div的高度本身，我试过jsFiddle，但它不工作，并在那里出现一些奇怪的线......任何人都可以帮助我吗？

http://jsfiddle.net/kPq6J/7/

Answer 1

我想你正在尝试做这个小提琴被捕获：http://jsfiddle.net/f3Lpv/1/

$(document).ready(function() { 
    $("#toggleid").click(function() { 
     var child = $("#child"); 

     if(child.is(":visible")) { 
      child.fadeTo(500, 0.0, function() { 
       child.slideUp(); 
      }); 
      $("#toggleid").text("Show"); 
     } else { 
      child.slideDown(function() { 
       child.fadeTo(500, 1.0);       
      }); 
      $("#toggleid").text("Hide"); 
     } 
    }); 
});​ 

为了避免神器问题在铬，你可能想确保你的CSS设置底部填充1px。不知道这是必须始终还是仅仅在的jsfiddle：

body { 
    padding-bottom:1px; 
} 

也是这个小提琴（http://jsfiddle.net/f3Lpv/2/）查看有关淡入略有不同的动画技术。

Answer 2

一种方法是：

$(function() { 
    $("#toggleid").click(function(e) { 
     var mh = $("#mother").height(), 
      ch = $("#child").outerHeight(); 
     $("#mother").height(mh); 
     if ($("#child").is(":visible")) { 
      $("#child").fadeOut(500, function(e) { 
       $("#mother").animate({ height: mh-ch }); 
       $("#toggleid").text("Show"); 
      }); 
     } 
     else { 
      $("#mother").animate({ height: mh+ch }, function(e) { 
       $("#child").fadeIn(500); 
       $("#toggleid").text("Hide"); 
      }); 
     }; 
    }); 
}); 

但是！，如果你希望它是更动态的，你可能会考虑更多的东西一样：

$(function() { 
    $(".toggleClass").live("click", function(e) { 
     var $this = $(this), 
      $mother = $this.parent(), 
      $child = $this.siblings("div"), // maybe replace with Css Class ".child" 
      mh = $mother.height(), 
      ch = $child.outerHeight(); 
     $mother.height(mh); 
     if ($child.is(":visible")) { 
      $child.fadeOut(500, function(e) { 
       $mother.animate({ height: mh-ch }); 
       $this.text("Show"); 
      }); 
     } 
     else { 
      $mother.animate({ height: mh+ch }, function(e) { 
       $child.fadeIn(500); 
       $this.text("Hide"); 
      }); 
     }; 
    }); 
}); 

Answer 3

基于Steve Campbell's great answer，我更新了jsfiddle而不是jQuery插件。

用法：child.smoothFadeIn();和child.smoothFadeOut();

(function ($) { 
    $.fn.smoothFadeOut = function() { 
     var selector = this; 
     selector.slideDown(function() { 
      selector.fadeTo(500, 1.0); 
     }); 
    }; 

    $.fn.smoothFadeIn = function() { 
     var selector = this; 
     selector.fadeTo(500, 0.0, function() { 
      selector.slideUp(); 
     }); 
    }; 
}(jQuery)); 

jsFiddle in action