和JSFiddle

Question

有没有办法动画显示：无显示：阻止使用CSS以便隐藏的div向下滑动而不是突然出现，或者我应该以不同的方式进行此操作？

HTML：

<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

CSS：

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

这是我的剧本：

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});

和JSFiddle

Answer 1

是的，有一种方法： http://jsfiddle.net/6C42Q/12/

通过使用CSS3过渡和操纵高度，而不是显示属性：

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

更多信息：Slide down div on click Pure CSS?

Answer 2

由于您已经在使用jQuery，最简单的方法就是使用slideDown（）。 http://api.jquery.com/slidedown/

还有slideToggle（）。

然后，您不需要手动执行所有特定于浏览器的转换css。

Answer 3

我喜欢CSS过渡的想法，但它仍然非常跳跃。有时最大高度必须设置为一个非常高的数字，因为动态内容使得过渡无用，因为它非常跳跃。所以，我回到jQuery，但它有自己的错误。内联元素是跳跃的。

我发现这对我有用：

$(this).find('.p').stop().css('display','block').hide().slideDown();

停止会停止所有先前的过渡。 css确保它被视为块元素，即使它不是。隐藏隐藏了该元素，但jquery会将其记住为块元素。最后，slideDown通过向下滑动来显示元素。

Answer 4

怎么样？

$("#yourdiv").animate({height: 'toggle'});

切换将打开/关闭div，动画应从下方显示。在这种情况下，您不需要特定的CSS来隐藏＆＃34;它

Answer 5

您也可以使用

$('#youDiv').slideDown('fast');

或者你可以告诉主动div上升然后被叫下去

$('.yourclick').click(function(e) {
       var gett = $(this).(ID);
       $('.youractiveDiv').slideUp('fast', function(){
        $('.'+gett).slideDown(300);
       });
});

类似的东西。

从显示屏向下滑动动画：无显示：阻止？

和JSFiddle

5 个答案: