Jquery 带文本的div上的向下滑动效果

我正在尝试向下滑动

一个
元素，它位于
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;
 });

$（'body'）。在（'submit'，'fform'，函数（）{
$（'#delete'）.html（“处理…”）。slideDown（'slow'）；
//ajax调用
返回false；
});

新的跨度似乎没有向下滑动，它只是直接向上显示，没有任何效果

有什么问题吗

编辑：
正如问题的标题所说：“…带文本”没有一个答案能说明这一点。你能用div（类似于我们在垂直字幕中看到的东西）来滑动文本吗

这就是我想要的：由于
新的div是在显示状态下创建的，因此可以立即在页面上看到

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

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

$（'#delete'）.html（“处理…”）.hide（）.slideDown（'slow'）；

它之所以没有向下滑动，是因为它已经可见。尝试先将其隐藏，然后向下滑动：

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

$（'#delete'）.html（“处理…”）.hide（）.slideDown（'slow'）；

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

这里有一个轻微的重组，可以实现您想要的向下滑动，并且只隐藏表单，以便以后可以再次显示它

请参见此JSFIDLE:
将元素添加为隐藏，然后将其向下滑动：

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

$（'body'）。在（'submit'，'fform'，函数（）上{
var div=$（''，{'class'：'front'，
文本：'处理…'，
样式：'display:none；'
}
);
$（'#delete'）.html（div）；
向下滑动分区（“慢速”）；
返回false；
});


而
slideDown（）
有时会出现内联元素放置不正确的问题，所以请使用块元素。
@JAVAGeek我不明白你的意思，你能详细解释一下吗？就像你的小提琴一样。。。文本仍保留在原来的位置上。只不过幻灯片向下滑了一下。
div
。。我想用div.向下滑动文本。。因此，文本也显示为向下滑动。@JAVAGeek-slideDown（）不这样做，这是你要做的吗->记住，这会将顶部值设置为负数以隐藏屏幕上方的元素，因此依赖于父元素的位置和/或溢出等。这是我的下一个问题。。看这个…如何解决这个…然后你需要一个包装，像这样！