.animate() 高度在 Firefox 中显示隐藏元素

Question

参考：http://api.jquery.com/animate/

注意：不像 .slideDown() 和 .fadeIn()，.animate() 方法不会使隐藏元素可见 作为效果的一部分。例如，给定 $("someElement" ).hide().animate({height: "20px"}, 500)，动画会运行，但是 该元素将保持隐藏状态。

小提琴：http://jsfiddle.net/86q9w/2/

if (!$('textarea').hasClass('nbrdr')) {
    $('.lbxa textarea').animate({
        height: "100px"
    }, 500);
}

正常工作（在大多数浏览器中都可以），它应该动画，同时仅在第一次单击任何跨度时显示与单击的跨度相对应的文本区域。出于某种原因，在 Firefox（据我所知的所有版本）中，此动画在设置为 display: none via css 后使所有文本区域可见。

Answer 1

检查这个小提琴

Example

var currentIndex;
$('span.spec').click(function() {
   var which = $(this).index();
   if(currentIndex != which){
   $('textarea').slideUp(100).eq(which).slideDown(100);
   }
   currentIndex = which;
});