【问题标题】：SlideDown Effect on div with text带有文本的 div 上的 SlideDown 效果
【发布时间】：2013-04-30 21:33:44
【问题描述】：

jsFiddle

我正在尝试slideDown <span>，它位于 div 元素内

<div id='delete'>
    <form id='fform'> 
        <span class='front15'>Enter your name </span>

        <input type='text' id='tf' placeholder='name' />
        <input type='submit' id='get_button' value='Get' text='Get'>
    </form>
</div>

Js：

 $('body').on('submit', '#fform', function () {
     $('#delete').html("<span class='front'>Processing...</span>").slideDown('slow');
     // ajax call
     return false;
 });

新的跨度似乎不是slideDown，它只是直接显示没有效果

有什么问题？

编辑： 正如问题的标题所说：'..with text'没有任何答案可以解决这一点。能否请您使文本与 div 一起滑动（就像我们在垂直选取框中看到的那样）

这就是我想要的：感谢adeneo

Fiddle

【问题讨论】：

标签： jquery html css animation

【解决方案1】：

将元素添加为隐藏，然后向下滑动：

$('body').on('submit','#fform',function(){ 
     var div = $('<div />', {'class': 'front', 
                                text  :'Processing...', 
                                style :'display:none;'
                              }
                );
     $('#delete').html( div );
     div.slideDown('slow');
     return false;
 });

FIDDLE

而slideDown() 有时会出现内联元素放置不正确的问题，因此请使用块元素。

【讨论】：

@JAVAGeek - slideDown() 不这样做，这是你想要做的 -> FIDDLE
请记住，这会将顶部值设置为负数以隐藏屏幕上方的元素，因此将依赖于父元素的放置和/或溢出等。
这是我的下一个问题.. 看到这个jsfiddle.net/n6F4D ...如何解决这个..
那么你需要一个包装器，像这样FIDDLE！

【解决方案2】：

新的 div 在显示状态下创建，因此在页面上立即可见。

如果您将其创建为隐藏，则可以将其向下滑动：

$('#delete').html("<span class='front'>Processing...</span>").hide().slideDown('slow');

http://jsfiddle.net/ua2GM/

【讨论】：

【解决方案3】：

它没有向下滑动的原因是它已经可见。尝试先隐藏然后向下滑动：

$('#delete').html("<span class='front'>Processing...</span>").hide().slideDown('slow');

演示：http://jsfiddle.net/9SsUN/2/

【讨论】：

@JAVAGeek 我不明白你的意思，你能详细说明一下吗？
就像在你的小提琴中......文本仍然在它的位置上......它只是 div 幻灯片向下......我想用 div 向下滑动文本......这样文本也显示为滑动下来..

【解决方案4】：

只需将#delete 的内容替换为您正在执行的元素即可立即显示该元素。此外，您可能希望稍后访问该表单，因此最好将其隐藏。

这是一个轻微的重组，实现了你想要的 slideDown，并且只隐藏了表单，以便你以后可以再次显示它。

查看这个 jsfiddle：http://jsfiddle.net/z2gYZ/

【讨论】：